如何使用Highcharts创建单个系列条形图 [英] How to create a single series bar graph with Highcharts

问题描述

我正尝试在图例中创建一个简单的具有单个系列和多个标签的Highcharts条形图。这是如何完成的？

下面是一个例子： http：// jsfiddle.net/jwerre/3g30q4L5/5/

  $（'＃container'）。highcharts（{
 
图：{
类型：'bar'，
}，
图例：{
启用：true，
布局：'vertical' ，
 align：'right'，
 verticalAlign：'middle'，
 labelFormatter：function（）{
 return this.name + - < span class ='total' >+ this.y +< / span>
} 
}，
标题：{
 text：'简单条形图'
}，
 xAxis：{
 categories：['First'，'Second'，'Third'，'Fourth'，'Fifth']，
 allowDecimals：false 
}，
 yAxis：{
 allowDecimals：false 
}，
 
系列：[
 {
 data：[
 {y：6，名字：'冷杉st''，颜色：'blue'}，
 {y：7，name：'Second'，color：'green'}，
 {y：9，name：'Third'，color：'黄色'}，
 {y：1，name：'Fourth'，color：'orange'}，
 {y：1，name：'Fifth'，color：'red'} 
] 
} 
]，
 
}）; 
  

解决方案

幸运的是，Highcharts非常灵活。
我们可以做一些技巧（也许是黑客？）来实现这种非传统任务。

你可以在你的案例中做的是创建假系列，并使用自定义事件处理程序：

 系列：[
 {
 pointWidth：20 ，
 color：colors [0]，
 showInLegend：false，
 data：[
 {y：6，name：'First'，color：colors [0]}， 
 {y：7，name：'Second'，color：colors [1]}，
 {y：9，name：'Third'，color：colors [2]}，
 {y：1，name：'Fourth'，color：colors [3]}，
 {y：1，name：'Fifth'，color：colors [4]} 
] 
 }，
 {color：'blue'}，
 {color：'green'}，
 {color：'yellow'}，
 {color：'orange'}， 
 {color：'red'} 
 
]，
  

为了格式化文件我们可以使用 labelFormatter 作为图例：

 图例：{ 
 labelFormatter：function（）{
 return names [this.index-1]; 
} 
}，
  

这会将图例标签设置为对应点。

最后我们需要处理图例点击，以模仿正常的行为：

< pre $ {
$ {
$ {
$ {$ b $ legendary：function（x）{
var i = this.index - 1;
var series = this.chart.series [0];
var point = series.points [i];

if（point.oldY == undefined）
point.oldY = point.y;

point.update（{y：point.y！= null？null：point.oldY}）;
}
}
}
}，

这些仅仅是一些例子，你可以显然改进并适应你自己的需要。

祝你好运！

http://jsfiddle.net/otm0oq2c/3/

I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?

Here is an example: http://jsfiddle.net/jwerre/3g30q4L5/5/

    $('#container').highcharts({

    chart: {
        type: 'bar',
    },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        labelFormatter: function() {
            return this.name + " - <span class='total'>"+this.y+"</span>"
        }
    },
    title: {
        text: 'Simple Bar Graph'
    },
    xAxis: {
        categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
        allowDecimals: false
    },
    yAxis: {
        allowDecimals: false
    },

    series: [
        {
            data: [
                {y: 6, name: 'First', color: 'blue'},
                {y: 7, name: 'Second', color: 'green'},
                {y: 9, name: 'Third', color: 'yellow'},
                {y: 1, name: 'Fourth', color: 'orange'},
                {y: 1, name: 'Fifth', color: 'red'}
            ]
        }
    ],

});

解决方案

Luckily, Highcharts is pretty flexible. We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.

What you could do in your case is create "fake" serieses, and use custom event handlers:

    series: [
        {
            pointWidth:20,
            color: colors[0],
            showInLegend:false,
            data: [
                {y: 6, name: 'First', color: colors[0]},
                {y: 7, name: 'Second', color: colors[1]},
                {y: 9, name: 'Third', color: colors[2]},
                {y: 1, name: 'Fourth', color: colors[3]},
                {y: 1, name: 'Fifth', color: colors[4]}
            ]
        },
        {color: 'blue'},
        {color: 'green'},
        {color: 'yellow'},
        {color: 'orange'},
        {color: 'red'}

    ],

In order to format the legend labels we can use labelFormatter for the legend:

    legend: {
        labelFormatter: function(){
            return names[this.index-1];
        }
    },

this will set the legend label to the name of the corresponding point.

And finally we need to handle the legend click, to imitate the "normal" behaviour:

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (x) {
                    var i = this.index  - 1;
                    var series = this.chart.series[0];
                    var point = series.points[i];   

                    if(point.oldY == undefined)
                       point.oldY = point.y;

                    point.update({y: point.y != null ? null : point.oldY});
                }
            }
        }
    },

These are just examples, you can obviously improve this and adjust to your own need.

Good Luck!

http://jsfiddle.net/otm0oq2c/3/

这篇关于如何使用Highcharts创建单个系列条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！