如何设置图表js自定义

Question

我想在我的网站中使用chart.js。我成功地与下面

var doughnutData = [ 
     { 
      value: 30, 
      color:"#f91942", 
     }, 
     { 
      value : 50, 
      color : "#0b7bb5" 
     }, 
     { 
      value : 120, 
      color : "#4D5360" 
     } 

    ]; 

    var labels = [ 
     'Red', 
     'Yellow', 
     'Blue' 
    ]; 


    var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData); 

</script>` 

代码实现的结果是这样的

现在我想知道是否有任何地方，使列显示的号码时鼠标悬停和添加每列的标签？

Answer 1

与您的数据添加标签，以显示它的提示

var doughnutData = [{ 
    value: 30, 
    color: "#f91942", 
    label: 'Red' 
}, { 
    value: 50, 
    color: "#0b7bb5", 
    label: 'Yellow' 
}, { 
    value: 120, 
    color: "#4D5360", 
    label: 'Blue' 
}]; 

这将默认的模板

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

这表明像

红色显示工具提示：30

您可以更改使用tooltipTemplate关键的模板，如下面

var options: { 
    tooltipTemplate: "This value is -> <%= value %>" 
}; 
var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(data, options); 

这会给你

这个值是 - > 50