如何将数据动态加载到highcharts图表中

时间:2018-03-10 17:19:29

标签: javascript jquery highcharts

这是我想用于我的项目的图表,Column Drilldown ,我使用node.js将数据从数据库发送到客户端,但我不知道如何将来自服务器的数据提供给图表数据。 这是我从服务器获得的数据,并希望将其提供给图表

$.get('Index_api/SoldProductsByName', updateView)

     var ProductByName = {};
 function updateView(data){
    var i=0;
     $.each(data, function(key, item)
     {
           ProductByName= {'name': item.Product_Name, 'y':item.TOTALSOLD,'drilldown':item.Product_Name};



    });


 }

我曾尝试将ProductByName放入data的{​​{1}}对象中,但无法正常工作

1 个答案:

答案 0 :(得分:0)

您发布的代码似乎不完整。看起来你正在迭代地覆盖ProductByName w /一个新对象;你需要的是你的系列数据的一系列对象。如果您有向下钻取数据,则需要将其自己的数据集绑定到item.Product_Name

下面我更改了您的udpateView方法以加载基本系列数据,但是,它看起来不像您有任何明细数据。

$.get('Index_api/SoldProductsByName', updateView);

function updateView(data) {
    var i = 0, series = [], drilldown = [];
    $.each(data, function (key, item) {
        series.push({
            name: item.Product_Name
            , y: item.TOTALSOLD
            , drilldown: item.Product_Name
        });
    });

    Highcharts.chart('your-chart-container', {
        chart: {
            type: 'column'
        },
        xAxis: { 
            type: 'category'
        },
        series: [{
            name: 'Product',
            data: series
        }],
        drilldown: {
            series: drilldown
        }
    });
}