英文:
In ngx-echarts, is there a way to configure the legend icon inactive state?
问题
我正在配置我的散点图图例,使用ngx-echarts。与在图例中使用固定符号表示我的数据系列不同,我想要显示一个表示激活时的选中复选框和非激活时的未选中复选框的图标。
我已经使用 "icon" 参数实现了第一个目标:
this.chartOption = {
legend: {
data: {
name: 'serie1',
icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z'
},
data: {
name: 'serie2',
icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z'
}
}
}
但是,虽然文档提到了 "inactiveColor"、"inactiveBorderColor" 等用于配置不激活时图例行为的选项,但我没有看到相应的图标选项(例如 "inactiveIcon")。
我是否遗漏了什么?
提前感谢。
英文:
I'm configuring the legend of my scatter chart using ngx-echarts. Instead of a fixed symbol to represent my data series in the legend, I would like to display an icon that represents a checked checkbox when active and an unchecked checkbox when inactive.
I achieved the first one using the "icon" parameter:
this.chartOption = {
legend: {
data: {
name: 'serie1',
icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
},
data: {
name: 'serie2',
icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
}
}
}
But, while the documentation mentions inactiveColor, inactiveBorderColor etc. to configure the behaviour of the legend when inactive, I don't see an equivalent for the icon (like "inactiveIcon").
Is there anything I've missed?
Thanks in advance
答案1
得分: 0
你可以使用 legendselectchanged
事件来动态更改图例的图标(或其他属性)。
假设你将 SVG 路径存储在一个字符串中,并按照标准方法创建了 ECharts 实例 myChart
:
const myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const iconCheckedPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0-24 18-42t-42 18H180Z';
使用以下初始 legend
选项:
const option = {
// ........ 其他选项
legend: {
data: [{
name: 'serie1',
icon: iconCheckedPath
},
{
name: 'serie2',
icon: iconCheckedPath
}
],
// .....
}
// ....
};
myChart.setOption(option);
你可以设置事件处理程序如下:
myChart.on('legendselectchanged', function ({selected}) {
myChart.setOption({
legend:{
data: Object.entries(selected)
.map(([name, nameSelected]) =>
({name, icon: nameSelected ? iconCheckedPath: 'square'}))
}
})
});
这里有一个在 codesandbox 上的工作示例,是从 ECharts 的标准示例中衍生出来的。
如果在 legend.data
中有其他选项,可以使用以下方式将它们与新选项合并:
myChart.on('legendselectchanged', function ({selected}) {
const actualData = myChart.getOption().legend[0].data;
Object.entries(selected).forEach(([name, nameSelected])=>{
const dataObj = actualData.find(({name: actualName})=>actualName === name);
if(dataObj){
dataObj.icon = nameSelected ? iconCheckedPath: 'square';
}
});
myChart.setOption({
legend:{
data: actualData
}
})
});
这里有一个 codepen 示例。
英文:
You can use the legendselectchanged
event to dynamically change the icon (or any other) properties of the legend.
Assuming that you set the svg path in a string and create the echarts instance myChart
by the standard recipe:
const myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const iconCheckedPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z';
with the initial legend
option as
const option = {
// ........ other options
legend: {
data: [{
name: 'serie1',
icon: iconCheckedPath
},
{
name: 'serie2',
icon: iconCheckedPath
}
],
// .....
}
// ....
};
myChart.setOption(option);
you may set the event handler as
myChart.on('legendselectchanged', function ({selected}) {
myChart.setOption({
legend:{
data: Object.entries(selected)
.map(([name, nameSelected]) =>
({name, icon: nameSelected ? iconCheckedPath: 'square'}))
}
})
});
Here's a working example in a codesandbox, forked from one of echart's standard examples.
In case there are other options in legend.data
, one may merge them with the new options with something on the lines of
myChart.on('legendselectchanged', function ({selected}) {
const actualData = myChart.getOption().legend[0].data;
Object.entries(selected).forEach(([name, nameSelected])=>{
const dataObj = actualData.find(({name: actualName})=>actualName === name);
if(dataObj){
dataObj.icon = nameSelected ? iconCheckedPath: 'square';
}
});
myChart.setOption({
legend:{
data: actualData
}
})
});
Here's a codepen example with that.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论