2017-04-25 65 views
0

我正在用chart.js做一個圖形,我可以把圖形工作,但我想顯示圖形的每個弧上的值,我不能。 我看到了我在互聯網上看到的一切,沒有任何幫助。顯示每個弧圓環上的值Chart.js

而不是讓我想擁有每條弧上的數據的工具提示。那可能嗎?

我的代碼:

var randomScalingFactor = function() { 
return Math.round(Math.random() * 100); 
}; 
var car = { 
labels: ["January", "February", "March", "April", "May"], 
datasets: [{ 
    data: [ 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
     randomScalingFactor(), 
    ], 
    backgroundColor: [ 
     window.chartColors.red, 
     window.chartColors.orange, 
     window.chartColors.yellow, 
     window.chartColors.green, 
     color(window.chartColors.black).alpha(0.4).rgbString() 
    ],borderColor: [ 
     'white', 
     'white', 
     'white', 
     'white', 
     'white' 
    ], 
    borderWidth: 5, 

}], 

    }; 


window.onload = function() { 
var ctx = document.getElementById("chart-area").getContext("2d"); 
window.myDoughnut = new Chart(ctx, { 
    type: 'doughnut', 
    data: car, 
    showDatapoints: true, 
    options: { 
    scaleShowLabels: true, 
     responsive: true, 
     legend: { 
      position: 'bottom', 
     }, 
     title: { 
      display: true, 
      text: 'Idades', 
      fontSize:20 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
    } 
}); 

}; 

這是我有: http://imgur.com/FpICd3d

這是我假裝: http://imgur.com/UX09lbM

有人能幫助我嗎?

回答

0

是的!這絕對有可能。

雖然你可以創建自己的插件不過,我會建議使用ChartJS 插件稱爲Chart.PieceLabel.js,這使得它更容易完成。

使用添加以下的圖表選項

pieceLabel: { 
    mode: 'value' 
} 

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100); 
 
}; 
 
var ctx = document.getElementById("chart-area").getContext("2d"); 
 
var myDoughnut = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["January", "February", "March", "April", "May"], 
 
     datasets: [{ 
 
      data: [ 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
       randomScalingFactor(), 
 
      ], 
 
      backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'], 
 
      borderColor: 'white', 
 
      borderWidth: 5, 
 
     }] 
 
    }, 
 
    showDatapoints: true, 
 
    options: { 
 
     tooltips: { 
 
      enabled: false 
 
     }, 
 
     pieceLabel: { 
 
      mode: 'value' 
 
     }, 
 
     responsive: true, 
 
     legend: { 
 
      position: 'bottom', 
 
     }, 
 
     title: { 
 
      display: true, 
 
      text: 'Idades', 
 
      fontSize: 20 
 
     }, 
 
     animation: { 
 
      animateScale: true, 
 
      animateRotate: true 
 
     } 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script> 
 
<canvas id="chart-area"></canvas>

+0

的結果是一樣的,這並不工作,因爲它沒有顯示出價值。 當我運行代碼片段時,只出現圖形而不是數值。 你明白我在說什麼嗎?sy for my english –

+0

在控制檯顯示我這個:GET https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min。 js net :: ERR_BLOCKED_BY_CLIENT –

+0

@BrunoGonçalves是的,你的英語很好。別擔心:)也許你有一些分機。 (即adblock),這是造成這個問題。禁用該分機。或者也許使用這個鏈接.. https://istack.000webhostapp.com/Chart.PieceLabel.min.js –