2016-11-18 20 views
2

我使用HichChart的餅圖表示將顯示有關不同學生的報告數據 - 這個圖表分爲幾個部分:餅圖的數據在不同的事情HighChart

  • 積極的數據。
  • 負面數據。

我找到了完美的工作對一個學生,但是當我一個人的積極areaand裏面然後我clcik上另一名學生出現問題 - 餅圖使用積極的一面的顏色(和我做不記得告訴它這樣做)。主要問題是,當我在鑽井階段,我不得不返回,否則它將加載不同顏色的不同數據。

這裏是我的代碼:

<div id="ChartContainer" style="width: 600px; height: 400px; margin: 0 auto"></div> 

$(function(){ 
    HighCharts.chart('ChartContainer', { 
     chat: { 
      type: 'pie' 
     }, 
     title: { 
      text: 'Positive: 426/Need Work: 28' 
     }, 
     plotOptions: { 
      pie: { 
       size: 250, 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>: ' + this.percentage + '%'; 
        } 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.point.name + '</b>: ' + this.percentage + '%'; 
      } 
     }, 
     series: [{ 
      data: [{ 
       name: 'Positive', 
       y: 4, 
       color:'#00ff00', 
       drilldown: 'Posit' 
      }, { 
       name: 'Negative', 
       y: 4, 
       color: '#ff7a0f', 
       drilldown: 'Negit' 
      }, ] 
     }], 
     drilldown: { 
      series: [{ 
       color: 'green', 
       id: 'Posit', 
       data: [ 
        {name:'one', y:4, color: 'Red'}, 
        ['two', 2], 
        ['three', 1], 
        ['four', 2], 
        ['five', 1] 
       ] 

      }, { 
       color: 'Blue', 
       id: 'Negit', 
       data: [ 
        {name:'one', y:4, color: 'Blue'}, 
        ['Seven', 4], 
        ['Eight', 2], 
        ['Nine', 3] 
       ] 

      } 

      ] 
     } 
    }); 
}); 
+0

正如我所瞭解的,你想要所有積極鑽取部分綠色賴特相同的顏色? – khushi

+0

我認爲你必須在第一個{name:'one',y:4,color:'Red'}中進行向下鑽取系列中的每個數據元素的聲明} – khushi

+0

否...當我鑽入階段並加載時圖表爲另一個..它仍然顯示我在鑽探階段與新的數據 –

回答

0

你忘了,包括https://code.highcharts.com/modules/drilldown.js 腳本tag.It應該在index.html的參考。您的價值轉換爲百分比。這是它顯示了不同的價值。

+0

nope,我解決了這個問題..當我在嵌套腳本中使用它時,這個問題就出現了。 –

+0

我重新編寫了你的​​代碼。請參考以下jsfiddle鏈接http://jsfiddle.net/qbzL8cyd –

+0

如果您有任何疑問,請隨時詢問我 –