Highcharts X-Axis新价值观

时间:2013-01-29 01:57:40

标签: javascript highcharts

我使用highcharts绘制柱形图如下:

var chart;
var count = 0;
$(function () {
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'graph',
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: 'Random Data'
        },
        xAxis: {
            categories: [
                'T1',
                'T2'
            ],
            startOnTick: true,
            endOnTick: true,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Y-Axis'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Tip is: '+ Highcharts.numberFormat(this.y, 1);
            }
        },
        series: [{
            name: 'Population',
            data: [34.4, 21.8],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
 });

});

我添加了以下功能,以便为图表添加新点

 function addPoints(name,acc)
 {
   var series = chart.series[0];
   series.addPoint(acc, false, true);
   categories = chart.xAxis[0].categories;
   categories.push(name+count);
   count++;
   chart.xAxis[0].setCategories(categories, false);
   chart.redraw();
 }

问题在于每次添加新点时,一列都会移出图表。我想在图表视图中保留所有列,因此当我添加新点时,图表会缩小。

JSFiddle

上查看

提前致谢....

1 个答案:

答案 0 :(得分:6)

addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation]) Add a point to the series after render time.

<强>参数

选项Number|Array|Object
The point options. If options isa single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively, or inthe case of OHLC or candlestick, as [x, open, high, low, close]. If it is an object, advanced options as outlined under series.data are applied.

重绘Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more thanone point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly calledafter the adding of points is finished.

转移Boolean
Defaults to false. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.

动画Mixed
Defaults to true. When true, the graph will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.

series.addPoint(acc, false, true);
                             /\ here's the problem, it should be false

参考

Updated demo