Question

我正在使用Gantt chart来创建数据可视化。我逐渐从ElasticSearch获取一些数据，我需要将新数据分配给图表。我怎样才能做到这一点？

这是一个JsFiddle link来查看。

需要动态添加的数据格式

[{
    "name": "login-util-sample",
    "pointRange": 0,
    "borderRadius": 1,
    "pointWidth": 15,
    "data": [{
        "x": 1451865600000,
        "x2": 1451865600000,
        "y": 0,
        "total_seconds": -1451865600000
    }, {
        "x": 1451952000000,
        "x2": 1451952000000,
        "y": 0,
        "total_seconds": -1451952000000
    }]
}, {
    "name": "SfdcObmReceiverCloudSvc",
    "pointRange": 0,
    "borderRadius": 1,
    "pointWidth": 15,
    "data": [{
        "x": 1451865600000,
        "x2": 1451865600000,
        "y": 1,
        "total_seconds": -1451865600000
    }, {
        "x": 1451952000000,
        "x2": 1451952000000,
        "y": 1,
        "total_seconds": -1451952000000
    }]
}, {
    "name": "create-update-aff-cloud",
    "pointRange": 0,
    "borderRadius": 1,
    "pointWidth": 15,
    "data": [{
        "x": 1451865600000,
        "x2": 1451865602000,
        "y": 3,
        "total_seconds": -1451865598000
    }, {
        "x": 1451952000000,
        "x2": 1451952017000,
        "y": 3,
        "total_seconds": -1451951983000
    }]
}]

图表选项

{
    chart: {
        type: 'xrange',
        renderTo: 'chart',
        height: 600,
        zoomType: 'xy',
        resetZoomButton: {
            theme: {
                fill: 'white',
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#41739D',
                        style: {
                            color: 'white'
                        }
                    }
                }
            }
        },
        events: {
            load: function(e) {
                var max = maxDate;
                var range = (24 * 3600 * 1000) * 7; // one day * 7
                this.xAxis[0].setExtremes(max - range, max);
                //resetMin = (max - range);
                //resetMax = max;
            },
            selection: function(event) {
                if (event.xAxis) {
                    console.log('min: ' + event.xAxis[0].min + ', max: ' + event.xAxis[0].max);
                } else {
                    console.log('Selection reset');
                    this.xAxis[0].setExtremes(resetMin, resetMax);
                    is1stZoom = true;
                    console.log('Reset to min: ' + resetMin + ', max: ' + resetMax);
                }
            },
            redraw: function() {
                var chart = this,
                    each = Highcharts.each;

                each(chart.series, function(s, i) {
                    each(s.points, function(p, j) {
                        if (p.graphic) {
                            p.graphic.css({
                                'stroke-width': 1,
                                'stroke': p.color
                            })
                        }
                    });
                });
            }
        }
    },
    title: {
        text: 'Processes Run'
    },
    xAxis: {
        type: 'datetime',
        tickInterval: xAxisStepping,
        dateTimeLabelFormats: {
            month: '%b %e, %Y'
        },
        min: minDate,
        max: maxDate,
        minRange: 1000,
        events: {
            afterSetExtremes: function(e) {
                if (is1stZoom) {
                    resetMin = e.min;
                    resetMax = e.max;
                    is1stZoom = false;
                    console.log('Should get reset to min: ' + e.min + ', max: ' + e.max);
                }
            }
        }
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false,
        tickInterval: 1,
        gridLineWidth: 1,
        title: '',
        categories: categories,
        min: minY,
        max: maxY,
        labels: {
            enabled: false
        }
    },
    navigator: {
        enabled: true,
        margin: 2
    },
    series: data,
    tooltip: {
        formatter: function() {
            var seriesName = this.series.name;
            return seriesName;
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            animation: false,
            turboThreshold: 100000000,
            dataGrouping: {
                enabled: false
            }
        }
    }
}

按钮点击我执行下面的操作，即Cannot read property '0' of undefined

$('#button').click(function() {
    for (var i = 0; i < newData.length; i++) {
        chart.series[i].setData(item);
    };
});

Answer 1

您必须按如下方式更改点击处理程序：

$('#button').click(function () {
  for (var i=0;i<newData.length;i++) {                      
    chart.highcharts().addSeries(newData[i], true);
  };
});

使用jQuery-Style初始化程序时返回的对象只是插入图表的DOM-Element的jQuery-Object。要获得表示该图表的Highcharts-Object，您必须再次在该对象上调用highcharts。

请参阅我的JSFiddle：http://jsfiddle.net/doc_snyder/20kt84vo/9/

或者，您可以使用备用语法var chart = new Highcharts.chart替换jQuery样式初始值设定项，您必须在renderTo配置选项中提供包含DOM-Element。

请参阅http://jsfiddle.net/doc_snyder/da2cvc5j/

如何在Highcharts中动态设置新数据？

1 个答案: