javascript - 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. 与第一个工作 fiddle 相比，您正在尝试添加系列而不是点。 chart.addSeries(ns);

2. seria['data'] = DivTotal[i]; 根据工作 fiddle ，数据应该是一个数组。

正在摆弄现有系列 - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/

没有系列的工作 fiddle - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/

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

相关问题:trying to dynamically update Highchart column chart but series undefined