Question

我正在创建一个包含来自不同JSON文件的数据的线图，下面的代码正在运行，但我想知道如何将来自不同api的这些JSON数据分组为一个用于每个循环以缩短码。

//consider the vol1- vol10 looks like var vol1 = ['1123', '1234','5436'];
//because i have other method the convert it to an arrray
//Xvol1 is just something like Xvol1=["Jan","Feb","Mar"]

        $('#trendChart').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: false
        },
        xAxis: {        
            categories : Xvol1
        },
        yAxis: {
            title: {
                text: 'Volume',
            },
            min: 0
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{
            name: $(".profileName0").html(),

            data: vol1
            },
            {
            name: $(".profileName1").html(),

            data: vol2
            },
            {
            name: $(".profileName3").html(),

            data: vol3
            },
            {
            name: $(".profileName2").html(),

            data: vol4
            },

            {
            name: $(".profileName4").html(),

            data: vol5
            },
            {
            name: $(".profileName5").html(),
            data: vol6
            },
            {
            name: $(".profileName6").html(),

            data: vol7
            },
            {
            name: $(".profileName7").html(),
            data: vol8
            },
            {
            name: $(".profileName8").html(),
            data: vol9
            },
            {
            name: $(".profileName9").html(),
            data: vol10
            },

]
    });

更新1：我试过了，但似乎不起作用。

var series = [];
                        for(i = 0; i < 10; i++){
                         series.push({name: $('.profileName'+i+'"').html(),, data: vol[i]});
                        }


                        $('#trendChart').highcharts({
                        chart: {
                            type: 'spline'
                        },
                        title: {
                            text: false
                        },
                        xAxis: {        
                            categories : Xvol1
                        },
                        yAxis: {
                            title: {
                                text: 'Volume',
                            },
                            min: 0
                        },

                        plotOptions: {
                            spline: {
                                marker: {
                                    enabled: true
                                }
                            }
                        },

                        series: [series]
                                });
                            });

通过for循环成功生成数据后，我现在正在努力解决如何更新数据的问题，我尝试使用setData()进行更新，但似乎需要进行调整才能正常工作。

                        var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example


                        var series = [];
                        for(i = 0; i < 5; i++){
                         series.push({name: names[i], data: seriesData[i]});
                        }

                        var trendChart12w = $('#trendChart').highcharts();
                        trendChart12w.series[0].setData(series);

解决方案：

var dataCounting = $(".DataCount").last().html();
                        var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example

                        var trendChart1y = $('#trendChart').highcharts();
                        trendChart1y.xAxis[0].setCategories(Xvol1);

                        for(i = 0; i < dataCounting; i++){
                        trendChart1y.series[i].setData(seriesData[i]);
                        }

Answer 1

您可以使用var names = [all the names]等名称数组以及var seriesData = [vol1, vol2...]等数据数组然后做

var series = [];
for(i = 0; i < names.length; i++){
 series.push({name: names[i], data: seriesData[i]});
}

然后将其设置为图表系列。

<强>更新在图表之外执行此操作。

var seriesData = [vol1, vol2]; // add all the vols. I have used 2 for example
var names = [$(".profileName0").html(), $(".profileName1").html()] // add all names

var series = [];
for(i = 0; i < names.length; i++){
 series.push({name: names[i], data: seriesData[i]});
}

然后在你的图表中，你设置系列，就这样做 series: series

具有多个JSON api数据的HighChart

1 个答案: