Highchart - 向多个同步的 highstock 图表之一添加更多系列

Question

我有以下两个相互同步的图表： chart

截图

数据来自这个JSON

JSON的结构是这样的：

{
 "xData": [], // the dates go here

 "datasets": [
  {
     "name": "Precipitation",

     "data": [],     // data for precip go here
     "unit": "mm",
     "type": "area",
     "valueDecimals": 3
   },
   {
     "name": "Temperature",

     "data": [],    // data for temp go here
     "unit": "°F",
     "type": "line",
     "valueDecimals": 2
  }
 ]
}

如何向其中一个图表添加其他系列？是否可以在JSON文件中做到这一点而无需修改javascript？。

这花了我一些时间 - 我真的很想保留当前设置，只需在任一图表中添加一个系列（即另一条线）。就像这里显示的一样：https://www.highcharts.com/stock/demo/compare

我已经能够修改JSON 中的大部分内容，然后在javascript 中指向它。任何帮助将不胜感激。

$(function() {

    /**
     * In order to synchronize tooltips and crosshairs, override the
     * built-in events with handlers defined on the parent element.
     */
    $('#container').bind('mousemove touchmove touchstart', function(e) {
        var chart,
            point,
            i,
            event;

        for (i = 0; i < Highcharts.charts.length; i = i + 1) {
            chart = Highcharts.charts[i];
            event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
            point = chart.series[0].searchPoint(event, true); // Get the hovered point

            if (point) {
                point.highlight(e);
            }
        }
    });
    /**
     * Override the reset function, we don't need to hide the tooltips and crosshairs.
     */
    Highcharts.Pointer.prototype.reset = function() {
        return undefined;
    };

    /**
     * Highlight a point by showing tooltip, setting hover state and draw crosshair
     */
    Highcharts.Point.prototype.highlight = function(event) {
        this.onMouseOver(); // Show the hover marker
        this.series.chart.tooltip.refresh(this); // Show the tooltip
        this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
    };

    /**
     * Synchronize zooming through the setExtremes event handler.
     */
    function syncExtremes(e) {
        var thisChart = this.chart;

        if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
            Highcharts.each(Highcharts.charts, function(chart) {
                if (chart !== thisChart) {
                    if (chart.xAxis[0].setExtremes) { // It is null while updating
                        chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
                            trigger: 'syncExtremes'
                        });
                    }
                }
            });
        }
    }

    // Get the data. The contents of the data file can be viewed at
    // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
    $.getJSON('../CC-chart/activity.json', function(activity) {
        $.each(activity.datasets, function(i, dataset) {

            // Add X values
            dataset.data = Highcharts.map(dataset.data, function(val, j) {
                return [activity.xData[j], val];
            });

            $('<div class="chart">')
                .appendTo('#container')
                .highcharts('StockChart', {
                    chart: {
                //        renderTo: "container",
                     //   marginLeft: 40, // Keep all charts left aligned
                        spacingTop: 20,
                        spacingBottom: 20
                    },

                    rangeSelector: {
                       enabled: false,
                        //selected: 4,
                        //inputEnabled: true,
                        buttonTheme: {
                            visibility: 'hidden'
                        },
                        labelStyle: {
                            visibility: 'hidden'
                        }
                    },
                    title: {
                        text: dataset.name,
                        align: 'left',
                        margin: 0,
                        x: 40,
                        y: -1
                    },
                    subtitle: {
                        text: dataset.subname
                    },
                    credits: {
                        enabled: false
                    },
                    legend: {
                        align: 'right',
                        x: -40,
                        verticalAlign: 'top',
                        y: 45,
                        floating: true,
                        enabled: true
                    },

                    xAxis: {
                        type: 'datetime',
                        tickInterval: (24 * 3600 * 1000) / 2, // a day divided by 2
                        crosshair: true,
                        events: {
                            setExtremes: syncExtremes
                        },
                        labels: {
                            //     format: '{value} km'
                        }
                    },
                    navigator: {
                        enabled: (function() {
                            return i === 0
                        })(),

                        series: {
                            color: '#FFFFFF',
                            fillOpacity: 0.00,
                            lineWidth: 2
                        }
                    },
                    scrollbar: {
                        enabled: (function() {
                            return i === 0
                        })(),
                    },
                    yAxis: {

                      //  tickPixelInterval: 75,
                       // padding: -20,
                        reversed: (function() { return i === 0 })(),
                         max: dataset.max,
                         min: dataset.min,
                        endOnTick: true,
                        tickInterval: dataset.tickInterval,

                        opposite: false,
                         labels: {
                            enabled: true,
                             y: dataset.yOffset,
                           // step: 0,
                         },
                        title: {
                            //offset: 5,
                            text: dataset.yvalue,
                        }
                    },
                    tooltip: {
                        positioner: function() {
                            return {
                                x: this.chart.chartWidth - this.label.width, // right aligned
                                y: -1 // align to title
                            };
                        },
                        borderWidth: 0,
                        backgroundColor: 'none',
                        pointFormat: '{point.y}',
                        headerFormat: '',
                        shadow: false,
                        style: {
                            fontSize: '18px'
                        },
                        shared: false,
                        split: false,
                        valueDecimals: dataset.valueDecimals
                    },
                    series: [{
                        data: dataset.data,
                        name: dataset.name,
                        type: dataset.type,
                        color: Highcharts.getOptions().colors[i],
                        fillOpacity: 0.3,
                        tooltip: {
                            valueSuffix: ' ' + dataset.unit
                        }
                    }]
                });
        });
    });
});

Answer 1

我创建了一个简单示例，说明如何在不编辑当前代码的情况下向图表添加其他系列：

JSON：

{
 "xData": [0,1,2,3,4], // the dates go here

 "datasets": [
  {
     "name": "Precipitation",

     "data": [2,2,2,2,2],     // data for precip go here
     "unit": "mm",
     "type": "area",
     "valueDecimals": 3
   },
   {
     "name": "Temperature",

     "data": [3,3,3,3,3],    // data for temp go here
     "unit": "°F",
     "type": "line",
     "valueDecimals": 2
  }
 ],
 "additionalDatasets": [
    {
     "name": "Additional series",

     "data": [1,1,1,1,1],     // data for precip go here
     "unit": "mm",
     "type": "line",
     "valueDecimals": 3
   }
 ]
}

附加js代码：

    if (activity.additionalDatasets){
        activity.additionalDatasets.forEach(function(el, i){
            el.color = Highcharts.getOptions().colors[i+2]
            el.data = Highcharts.map(el.data, function(val, j) {
                return [activity.xData[j], val];
            });
        });
    }

...

                series: [{
                    data: dataset.data,
                    name: dataset.name,
                    type: dataset.type,
                    color: Highcharts.getOptions().colors[i],
                    fillOpacity: 0.3,
                    tooltip: {
                        valueSuffix: ' ' + dataset.unit
                    }
                }].concat(activity.additionalDatasets)

现场演示：https://jsfiddle.net/BlackLabel/gjLuk3zp/