代码之家  ›  专栏  ›  技术社区  ›  m.o

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

  •  0
  • m.o  · 技术社区  · 8 年前

    这是我想用于我的项目的图表, 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 的对象 Highchart 但不起作用

    1 回复  |  直到 8 年前
        1
  •  0
  •   Napoli    8 年前

    您发布的代码似乎不完整。看起来您正在迭代覆盖 ProductByName 带有新对象;您需要的是序列数据的对象数组。如果您有深入的数据,则需要将其自己的数据集键入 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
            }
        });
    }