在 x 轴和图例中显示 HighCharts 系列名称
Posted
技术标签:
【中文标题】在 x 轴和图例中显示 HighCharts 系列名称【英文标题】:Showing HighCharts series name on x-axis and in legend 【发布时间】:2013-08-14 15:05:00 【问题描述】:我正在尝试使用 Highcharts 创建一个柱形图,它仅在一个时间点显示多个系列,我想在 x 轴上显示系列的名称以及能够隐藏和显示每个系列使用图例。 我能够达到的最接近目标的方法是添加类别并拥有多个系列。
xAxis:
categories: [
'Tokyo',
'New York',
'London',
'Berlin'
]
然后添加多个系列,每个系列中只有一个数据点
series: [
name: 'Tokyo',
data: [49.9, null,null,null]
,
name: 'New York',
data: [null, 83.6,null,null]
,
name: 'London',
data: [null, null, 48.9,null]
,
name: 'Berlin',
data:[null, null, null, 42.4]
]
问题在于,虽然这只为 x 轴上的每个点显示一个系列,但 Highcharts 为每个其他系列分配空间,当隐藏系列时,只有系列将被隐藏,而不是 x 轴上的标签. jsfiddle 的链接在这里:http://jsfiddle.net/md2zk/
【问题讨论】:
我已经做得更好了,但还需要改进:jsfiddle.net/md2zk/4 【参考方案1】:在plotOptions中设置grouping: false
,见:http://jsfiddle.net/Fusher/md2zk/5/
【讨论】:
与我在 cmets 上发布的更改的最终结果完全相同,但是当您隐藏一个系列时,该列仍然存在。 无法在图表上“隐藏”类别。您将需要设置新类别、重新组织系列等。 没错。这就是为什么我没有发布我的更改作为解决方案。实现它需要更多的工作。 谢谢!改变分组使它看起来好多了。通过删除数据末尾的空值,我确实更接近了我想要的结果。这使您可以将系列隐藏在右侧,但显然还不是解决方案。 jsfiddle.net/md2zk/6 谁能建议如何在饼图中做到这一点?【参考方案2】:可以将类别与列一起隐藏。请通过下面给出的链接。希望这会有所帮助。
http://jsfiddle.net/md2zk/633/
$(function ()
$('#container').highcharts(
chart:
type: 'column'
,
title:
text: 'Monthly Average Rainfall'
,
subtitle:
text: 'Source: WorldClimate.com'
,
xAxis:
type: 'category',
,
yAxis:
min: 0,
title:
text: 'Rainfall (mm)'
,
,
plotOptions:
series:
grouping: false,
events:
legendItemClick: function ()
debugger;
if (this.visible)
this.setData([], false)
else
this.setData([this.chart.series[this.index].userOptions], true);
,
borderWidth: 0,
dataLabels:
enabled: true,
//style:
// color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//,
,
,
,
series: [
name: 'Tokyo',
data: [name : 'Tokyo',y:49.9],
y: 49.9
,
name: 'New York',
data: [name : 'New York',y:83.6],
y: 83.6
,
name: 'London',
data: [name : 'London',y:48.9],
y: 48.9
,
name: 'Berlin',
data:[name : 'Berlin',y: 42.4],
y: 42.4
],
navigation:
buttonOptions:
enabled: true
);
);
【讨论】:
以上是关于在 x 轴和图例中显示 HighCharts 系列名称的主要内容,如果未能解决你的问题,请参考以下文章