charts.js不會顯示圖例和圖表描述

Question

我使用JavaScript和charts.js看起來像這樣http://jsfiddle.net/vrwjfg9z/2749/

這是偉大的，但是當你將鼠標懸停在圖中的一部分，我想提出的一個圖表描述也被顯示。就像這個例子http://jsfiddle.net/vrwjfg9z/2750/

我似乎無法把兩者結合起來而無需一個要離開

我覺得它有什麼做的這部分代碼

var ctx = document.getElementById("doughnutChartCanvas").getContext("2d"); 
    new Chart(ctx).Doughnut(doughnutChartCanvas); 
    var doughnutChartCanvas = new Chart(ctx).Doughnut(doughnutChartCanvas, options); 
    document.getElementById('js-legend').innerHTML = doughnutChartCanvas.generateLegend(); 

Answer 1

您可以更改工具提示模板顯示標籤和值。默認情況下，這是行爲，所以要麼從選項中刪除工具提示，要將其更改爲類似於代碼段的內容。

在第二個示例中，您將創建選項，但不會將其添加到圖表中。這就是爲什麼你看到標籤和價值。 （默認外觀）

這意味着，如果標籤存在看跌標籤：值，露營：20，如果標籤不存在只使用20

<%if (label){%><%=label %>: <%}%><%= value + %> 

jQuery(window).load(function() { 
 
\t var doughnutChartCanvas = [ 
 
\t \t { 
 
\t \t \t value: 40, 
 
\t \t \t color:"#F7464A", 
 
\t \t \t label: "Camping" 
 

 
\t \t }, 
 
\t \t { 
 
\t \t \t value : 50, 
 
\t \t \t color : "#46BFBD", 
 
\t \t \t label: "Tennis" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t value : 50, 
 
\t \t \t color : "#659D32", 
 
\t \t \t label: "Gaming" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t value : 110, 
 
\t \t \t color : "#FDB45C", 
 
\t \t \t label: "Reading" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t value : 90, 
 
\t \t \t color : "#949FB1", 
 
\t \t \t label: "Hiking" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t value : 70, 
 
\t \t \t color : "#4D5360", 
 
\t \t \t label: "Snowboarding" 
 
\t \t } 
 
\t ]; 
 
\t var options = { 
 
    segmentShowStroke: false, 
 
    animateRotate: true, 
 
    animateScale: false, 
 
    percentageInnerCutout: 50, 
 
    tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>" 
 
} 
 

 
\t var ctx = document.getElementById("doughnutChartCanvas").getContext("2d"); 
 
\t new Chart(ctx).Doughnut(doughnutChartCanvas); 
 
\t var doughnutChartCanvas = new Chart(ctx).Doughnut(doughnutChartCanvas, options); 
 
\t document.getElementById('js-legend').innerHTML = doughnutChartCanvas.generateLegend(); 
 
});

.chart-legend li span{ 
 
    display: inline-block; 
 
    width: 12px; 
 
    height: 12px; 
 
    margin-right: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script> 
 
\t \t \t \t \t \t \t <canvas class="chartjs" id="doughnutChartCanvas" width="300" height="300"></canvas> 
 
          <div id="js-legend" class="chart-legend"></div>