0

次のように、ハイチャートを使用して縦棒グラフを描画しています。

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();
 }

問題は、新しいポイントを追加するたびに、1 つの列がグラフからずれることです。すべての列をチャート ビューに保持したいので、新しいポイントを追加すると、チャートが縮小されます。

JSFiddleで確認してください

前もって感謝します ....

4

1 に答える 1

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

参照

更新されたデモ

于 2013-01-29T02:25:18.217 に答える