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

debugcn 发表于 Dev

埃德温

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

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

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

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

乔丹威利斯

要删除示例中的网格线，只需删除所有比例配置。只需删除下面的代码。请参阅此分叉版本。

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"
            ]
        }]
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。