在高图表

Question

我想在现有图表中加入一系列文章。

daytime = new Highcharts.Chart({
                    chart: {
                        renderTo: 'daytime_div',
                        defaultSeriesType: 'areaspline',
                        events: {
                            load: getData()
                        }
                    },
                    plotOptions: {
                        series: {
                            fillOpacity: 0.1,
                            lineWidth: 4,
                            marker: {
                                radius: 5,
                                lineWidth: 1,
                                lineColor: "#FFFFFF"
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            var s = [];

                            $.each(this.points, function (i, point) {
                                s.push('<span style="font-size:10px;">' + point.key + '</span><br/><strong>' + point.series.name + '</strong> : ' + point.y + '</span>');
                            });

                            return s.join('<br/>');
                        },
                        shared: true,
                        useHTML: true
                    },
                    credits: false,
                    title: false,
                    exporting: false,
                    legend: {
                        itemDistance: 50,
                        itemStyle: {
                            color: '#333'
                        }
                    },
                    xAxis: {
                        labels: {
                            staggerLines: 2
                        }
                    },
                    yAxis: {
                        gridLineColor: "#e7e7e7",
                        title: {
                            text: ''
                        },
                        labels: {
                            x: 15,
                            y: 15,
                            style: {
                                color: "#999999",
                                fontSize: "10px"
                            }
                        },
                    },
                    series: [{
                        name: 'Daily',
                        color: "#b18eda",
                        data: ddata
                    }]
                });

function getData() {
                $.ajax({
                    url: '...',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: data,
                    success: function (f) {
                        var categories = [];
                        var series_data = [];
                        $.each(f.d, function (i, e) {
                            categories.push(e.hour);
                            series_data.push(parseInt(e.numa));
                        });
                        daytime.xAxis[0].setCategories(categories);
                        daytime.series[0].setData(series_data);
                    },
                    cache: false
                });
            }

我从我的数据库获得的数据如下所示：

hour, numa
12 AM   1   
1 AM    0   
2 AM    0   
3 AM    0   
4 AM    0   

这显示图表中的一行很好。我想添加一个来自不同查询的第二行。第二行数据将如下所示：

hour, numa
12 AM   0   
1 AM    12  
2 AM    3   
3 AM    2   
4 AM    2   

有谁知道我怎么能把它包含在我的第二个系列中？我在high charts中看到了关于如何添加更多系列的示例。静态非常简单，但动态获取数据会使其变得更加复杂。

我正在尝试找到一种方法来向我的getData()函数添加2个系列。任何想法都会感激不尽。

Answer 1

您在分享如何添加多个系列的文档的fiddle中清楚地解释了这一点。

series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]

您可以在数组中传递多个系列，并且可以生成图表。

修改-1

如果来自不同系列的数据使用此fiddle。

var myComments=["First input","second comment","another comment","last comment"]
var dataValues = [29.9, 71.5, 194.1, 129.2];
var dataValues2 = [194.1, 95.6, 194.1, 29.9];
var categories = ['Jan', 'Feb', 'Mar', 'Apr'];
var n=['tooltip1','tooltip2','tooltip3','tooltip4'];
$(function () {
    $('#container').highcharts({
        chart: {},

        tooltip: {
            formatter: function () {
                var serieI = this.series.index;
                var index = categories.indexOf(this.x);
                var comment = myComments[index];
                return '-->'+comment;
            }
        },

        xAxis: {
            categories: categories
        },

        series: [{
            data: dataValues
        }, {
            data: dataValues2
        }]
    });
});

导致下图

Answer 2

那么你可以使用$ .when（）并在那里加载你所有的ajax和$ .then（）初始化图表。第二种解决方案是将查询准备到数据库并以单个json返回所有数据。