javascript - 如何隐藏网格线但在 Chart.js 上显示图例

Question

您好，我有当前使用 Chart.js 版本 2.5 显示饼图的代码。 https://jsfiddle.net/nLtacgoc/

1) 如何在显示图例的同时隐藏网格线？

2)目前从代码来看，图表顶部的图例和数据标签只响应下面这段代码，而不响应数据集下的标签:这里也有问题吗？

data: {
    labels: ["Pass", "Retrain", "Fail"],

Answer 1

1. 要删除示例中的网格线，只需删除所有比例配置即可。只需删除下面的代码即可。看这个forked version .

   scales: {
     xAxes: [{                                 
       ticks: {                                        
         beginAtZero:true
       }                                   
     }],                       
     yAxes: [{
       ticks: {                                        
         beginAtZero:true
       }
     }]
   }
   

   应删除此内容的原因是饼图没有 x 或 y 轴。通过添加此配置，您最终会强制 Chart.js 呈现网格和饼图。

2. 饼图和圆环图与条形图和折线图略有不同，因为数据集标签被忽略。仅使用数据标签数组来生成图例和工具提示。这是一个示例数据配置来解释我的意思。

   var data = {
       labels: [
           "Red",
           "Blue",
           "Yellow"
       ],
       datasets: [
           {
               data: [300, 50, 100],
               backgroundColor: [
                   "#FF6384",
                   "#36A2EB",
                   "#FFCE56"
               ],
               hoverBackgroundColor: [
                   "#FF6384",
                   "#36A2EB",
                   "#FFCE56"
               ]
           }]
   };