在 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 系列名称的主要内容,如果未能解决你的问题,请参考以下文章

HighCharts 从图例中隐藏系列名称

Highcharts在工具提示中获取图例“icon”

如何设置 highcharts X轴和Y轴值

HighCharts 禁用图例中的某些系列名称

Highcharts:如何将图例链接到类别而不是条形系列?

Highcharts 图例索引在图例点击时显示 -1