如何隐藏网格线但在chart.js上显示图例-Java 学习之路

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

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

2）目前，从代码中，图表顶部的图例和数据标签仅响应下面的代码，而不是数据集下的标签：这里是否存在问题？

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

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

回复于 2024-05-05T15:46:09+08:00

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

1 回答

相关问题