繁体   English   中英

Highchart-向栏添加动态数据

[英]Highchart - Add dynamic data to the bar

我正在使用条形图。 我想在已经绘制的现有条形图中添加新条形。

怎么做? 我已经使用以下

chartObject.series[i].addPoint(99, true);

但是没有得到结果。 它会自动添加带有默认标签名称的值。

我想将E栏插入A下的值 我怎样才能做到这一点?

chartObject = Highcharts.chart('chartContainer', {
            chart: {
                type: 'bar'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: ["A", "B", "C", "D"],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
            },

            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                },
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                debugger


                                for (var i = 0; i < chartObject.series.length; i++) {
                                    chartObject.series[i].addPoint(99, true);

                                }

                                alert('Category: ' + this.category + ', value: ' + this.y);
                            }
                        }
                    }
                },
                showInLegend: false
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: false

            },
            series: [{
                showInLegend: false,
                data: [
                    50,
                    35,
                    25,
                    80
                ]
            }]
        });

请参考以下jsfiddle: http : //jsfiddle.net/kkulig/rhneon2q/

我认为实现此目的的便捷方法之一是将类别定义移至点的名称属性:

data: [
   {y: 50, name: 'A'},
   {y: 35, name: 'B'}
]

并将xAxis类型更改为category:

type: 'category'

此处说明: http : //api.highcharts.com/highcharts/xAxis.categories

然后,您可以像这样用新的点更新图表:

更新:

码:

 chartObject.series[i].addPoint({y: this.y, name: 'E'}, true); 

在意甲末尾添加带有类别的新点。

如果您不想在单击的类别后出现带有类别的新点,则可以使用以下代码:

var data = chartObject.userOptions.series[i].data.slice(); // clone original userOptions
data.splice(this.index + 1, 0, {
  y: 10,
  name: "New cat. " + (chartObject.series[i].data.length - 2) // 2 - initial categories number
});
chartObject.series[i].update({
  data: data
});

更新结束

不幸的是,如果您像以前那样设置类别:

categories: ["A", "B", "C", "D"]

添加点的name属性不会用作类别。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM