HighChart with multple JSON api data



我正在创建一个包含来自不同 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]);
                        }

你可以像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

最新更新