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

Question

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

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

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

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

Answer 1

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

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

应该删除它的原因是饼图没有 x 或 y 轴。通过添加此配置，您最终会强制 chart.js 将网格与饼图一起呈现。

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

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

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

How to hide grid lines but show legend on chart.js

javascript

chart.js2