2016-08-04 89 views
0

我想將數據表添加到圖表。如何將數據表添加到動態生成的高圖

我想在這裏顯示的實施方案:http://jsfiddle.net/highcharts/z9zXM/

但它沒有爲我工作。

我懷疑它是因爲我如何實例化highcharts。

在上面的例子中,圖表是通過實例化Highcharts對象生成的。

我的代碼:

// data from an ajax call 
$.each(data, function(indicator, questions) { 

      indicator_type = ""; 

      $.each(questions, function(question, value) { 

       dataChartType = "column"; 

       series = []; 

       categories = []; 

       category_totals = {}; 

       if(value.programs == null) { 
        return true; 
       } 

       $.each(value.programs, function(program, body) { 

        total = 0; 

        values = []; 

        $.each(body, function(j, k) { 

         if (categories.indexOf(j) == -1) { 

          categories.push(j); 

          category_totals[j] = 0; 

         } 

         if(k != 0) { 
          values.push(k); 
         } else { 
          values.push(null); 
         } 


         category_totals[j] += parseInt(k, 10); 

         total += k; 


        }); 

        series.push({ 
         data: values, 
         total: total, 
         name: program //question 
        }); 

       }); // eo each program 

       var chartDiv = document.createElement('div'); 

       chartDiv.className = "chart"; 

       $('.charts_wrap').append(chartDiv); 

       $(chartDiv).highcharts({ 
        events: { 
         load: Highcharts.drawTable 
        }, 
        chart: { 
         type: dataChartType 
        }, 
        xAxis: { 
         categories: categories 
        }, 
        legend: { 
         layout: 'vertical', 
         backgroundColor: '#FFFFFF', 
         align: 'right', 
         verticalAlign: 'top', 
         y: 60, 
         x: -60 
        }, 
        tooltip: { 
         formatter: function() { 
          return '<strong>' + this.series.name + '</strong><br/>' + this.x + ': ' + this.y; 
         } 
        }, 
        plotOptions: { 
         line: { 
          connectNulls: true 
         }, 
         column: { 
          stacking: 'normal', 
          dataLabels: { 
           enabled: false, 
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
           style: { 
            textShadow: '0 0 3px w' 
           } 
          } 
         } 
        }, 
        series: series, 
        title:{ text: indicator }, 
        subtitle:{ text: question } 
       }); 


      }); // EO each question 

     }); // eo each indicator 

回答

1

當實例highcharts這樣的:

$("#container").highcharts({ ... 

事件選項需要包含圖表選項裏面:

$("#container").highcharts({ 
    chart: { 
     type: 'column', 
     events: { 
      load: Highcharts.drawTable 
     }, 
    }, 
    ... 
相關問題