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上显示图例

1 个答案: