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>