正在显示一些折线图的图例
您好,我正在使用折线图和 highcharts 版本 8.0.0
我在这里观察到一个问题 - 我正在连续发送 2 个数据的数组,但图表仅显示一个图例,这会误导用户它只有一个数据 -
this.dateHeaderArray = ['Jan 2021', 'Feb 2021', 'Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021'];
this.seriesDataArray = [
{
"name": "a_c5af-4825-86df-bc5_7161-4142-ad77-04d",
"type": "line",
"data": [ null,null,null,null,null,null,null, null, null, null,null,null],
"point": {
"events": {}
}
},
{
"name": "a_c5af-4825-86df-bc5_47b6-4616-a20b-dc3",
"type": "line",
"data": [ null,null,null,null,null,null,null, null, null, null,null,null],
"point": {
"events": {}
}
}
];
this.chartOptions = {
title: {
text: ''
},
legend: {
enabled: true
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.3f}</b>'
},
yAxis: {
min: 0,
title: {
text: 'Score',
style: {
fontSize: '12px',
fontFamily: 'Roboto',
color: '#485465'
}
}
},
xAxis: {
type: 'category',
labels: {
rotation: 0,
style: {
fontSize: '10px',
fontFamily: 'Roboto',
color: '#485465'
},
},
categories: this.dateHeaderArray
},
series: this.seriesDataArray
};
有人可以对此提出建议吗,是版本问题还是配置问题,如果是版本问题,那么哪个版本会适合我的情况。
Hi I am using line chart and highcharts version 8.0.0
i observe one issue here-
I am sending array of 2 data in series but graph is showing only one legend which will misguide to user that it has only one data-
this.dateHeaderArray = ['Jan 2021', 'Feb 2021', 'Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021'];
this.seriesDataArray = [
{
"name": "a_c5af-4825-86df-bc5_7161-4142-ad77-04d",
"type": "line",
"data": [ null,null,null,null,null,null,null, null, null, null,null,null],
"point": {
"events": {}
}
},
{
"name": "a_c5af-4825-86df-bc5_47b6-4616-a20b-dc3",
"type": "line",
"data": [ null,null,null,null,null,null,null, null, null, null,null,null],
"point": {
"events": {}
}
}
];
this.chartOptions = {
title: {
text: ''
},
legend: {
enabled: true
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.3f}</b>'
},
yAxis: {
min: 0,
title: {
text: 'Score',
style: {
fontSize: '12px',
fontFamily: 'Roboto',
color: '#485465'
}
}
},
xAxis: {
type: 'category',
labels: {
rotation: 0,
style: {
fontSize: '10px',
fontFamily: 'Roboto',
color: '#485465'
},
},
categories: this.dateHeaderArray
},
series: this.seriesDataArray
};
can someone suggest on this , is that version issue or configuration and if it is version issue then what version will work proper for my case.
image url- https://i.sstatic.net/j6t23.jpg
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
经过一番搜索,我找到了解决方案以及得到错误结果的原因。
更新功能如何在 highchart 中工作 -
id 选项用于将新选项集映射到现有对象。如果未找到相同 id 的现有对象,则更新相应的项(位于同一索引中)。
这里oneToOne就发挥了很好的作用。因为如果 oneToOne 为 true,则集合将一对一更新,并且将添加或删除项目以匹配新的更新选项。
after some search I found the solution and the reason of getting wrong result.
how the update function work in highchart -
an id option is used to map the new option set to an existing object. If an existing object of the same id is not found, the corresponding item (which is in same index) is updated.
Here oneToOne play a good role. since if oneToOne is true then collections will be updated one to one, and items will be either added or removed to match the new updated options.
如果图表第一次按预期工作并且在更新后不工作,请尝试添加更新标志,如下所示。
并在更新系列数据时将该标志设置为 true。
If the graph is working as expected for the first time and not working post update, try adding update flag as below.
And set the flag to true whenever you are updating the series data.