HighCharts列圖填充了一個函數的系列數據

Question

我試圖從經典ASP中的SQL Server結果填充HighCharts數據集。 （在例子中顯然有數字和名字，而不是vbscript變量）

第一個例子是沒有函數 - 並且工作。 http://jsfiddle.net/zbpamrhs/

$(function() { 

    var OnOff = 3 

    var DivName = [] 
    var DivN = [] 
    var DivTotal = [] 
    var DivColor = [] 

    DivName[0] = 'Div' 
    DivName[1] = 'Unit A' 
    DivName[2] = 'Unit B' 
    DivName[3] = 'Unit C' 

    DivN[0] = 22 
    DivN[1] = 10 
    DivN[2] = 7 
    DivN[3] = 3 

    DivTotal[0] = 5.6 
    DivTotal[1] = 5.8 
    DivTotal[2] = 5.4 
    DivTotal[3] = 5.7 

    DivColor[0] = '#333333' 
    DivColor[1] = '#c9e7ff' 
    DivColor[2] = '#4898a4' 
    DivColor[3] = '#ffd949' 



    $('#DivCompTotalC').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: '' 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      itemWidth: 180, 
      useHTML: true, 
      x: 0, 
      y: 40, 
      borderWidth: 0 
     }, 
     xAxis: { 
      categories: [''] 

     }, 
     yAxis: { 
      max: 7.01, 
      labels: { 
       enabled: false 
      }, 
      gridLineColor: 'transparent', 

      plotLines: [{ 

       value: DivTotal[0], 
       color: DivColor[0], 
       width: 2, 

       label: { 
        text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0], 
        align: 'right', 
        y: -5, 
        x: 0, 
        style: { 
         fontSize: '13px' 
        } 
       }, 
       zIndex: 2 
      }], 
      title: { 
       text: '' 
      } 

     }, 

     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       groupPadding: 0.10, 
       borderWidth: 0 
      }, 
      series: { 
       dataLabels: { 

        enabled: true, 
        y: 5, 
        style: { 
         fontSize: '14px' 
        } 
       }, 
       enableMouseTracking: false, 
       events: { 
        legendItemClick: function() { 
         return false; 
        } 
       } 
      } 
     }, 



     series: [{ 
      name: DivName[1] + ' [' + DivN[1] + ']', 
      color: '#c9e7ff', 
      data: [DivTotal[1]] 
     }, { 
      name: DivName[2] + ' [' + DivN[2] + ']', 
      color: '#ffd949', 
      data: [DivTotal[2]] 
     }, { 
      name: DivName[3] + ' [' + DivN[3] + ']', 
      color: '#4898a4', 
      data: [DivTotal[3]] 
     }] 


    }); 

}); 

我找不到什麼是錯在第二http://jsfiddle.net/bfb6crpv/

$(function() { 

    var OnOff = 3 

    var DivName = [] 
    var DivN = [] 
    var DivTotal = [] 
    var DivColor = [] 

    DivName[0] = 'Div' 
    DivName[1] = 'Unit A' 
    DivName[2] = 'Unit B' 
    DivName[3] = 'Unit C' 

    DivN[0] = 22 
    DivN[1] = 10 
    DivN[2] = 7 
    DivN[3] = 3 

    DivTotal[0] = 5.66666666666667 
    DivTotal[1] = 5.81208053691275 
    DivTotal[2] = 5.41304347826087 
    DivTotal[3] = 5.74683544303798 

    DivColor[0] = '#333333' 
    DivColor[1] = '#c9e7ff' 
    DivColor[2] = '#4898a4' 
    DivColor[3] = '#ffd949' 



    $('#DivCompTotalC').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: '' 
     }, 
     credits: { 
      enabled: false 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      itemWidth: 180, 
      useHTML: true, 
      x: 0, 
      y: 40, 
      borderWidth: 0 
     }, 
     xAxis: { 
      categories: [''] 

     }, 
     yAxis: { 
      max: 7.01, 
      labels: { 
       enabled: false 
      }, 
      gridLineColor: 'transparent', 

      plotLines: [{ 

       value: DivTotal[0], 
       color: DivColor[0], 
       width: 2, 

       label: { 
        text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0], 
        align: 'right', 
        y: -5, 
        x: 0, 
        style: { 
         fontSize: '13px' 
        } 
       }, 
       zIndex: 2 
      }], 
      title: { 
       text: '' 
      } 

     }, 

     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       groupPadding: 0.10, 
       borderWidth: 0 
      }, 
      series: { 
       dataLabels: { 

        enabled: true, 
        y: 5, 
        style: { 
         fontSize: '14px' 
        } 
       }, 
       enableMouseTracking: false, 
       events: { 
        legendItemClick: function() { 
         return false; 
        } 
       } 
      } 
     }, 



     series: [] 

    }); 

    var newSeries = []; 
    for (var i = 1; i <= OnOff; i++) { 
     var newData = []; 

     var seria = {}; 
     seria['name'] = DivName[i] + ' [' + DivN[i] + ']'; 
     seria['data'] = DivTotal[i]; 
     seria['color'] = DivColor[i]; 
     newSeries.push(seria); 
    } 
    //alert(JSON.stringify(newSeries)); 
    var chart = $('#DivCompTotalC').highcharts(); 
    //alert(JSON.stringify(chart)); 
    $.each(newSeries, function (i, ns) { 
     chart.addSeries(ns); 
    }); 

}); 

Answer 1

有多種問題：

1. 您正在嘗試addSeries而不是點相比，第一工作小提琴。 chart.addSeries(ns);

2. seria['data'] = DivTotal[i];根據工作小提琴數據應該是一個數組。

工作撥弄現有系列 - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/

工作撥弄無系列 - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/

文檔 - http://api.highcharts.com/highcharts#Series.addPoint

相關問題：trying to dynamically update Highchart column chart but series undefined