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

Hi I have the current code to display a pie chart currently using chart.js version 2.5. https://jsfiddle.net/nLtacgoc/

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

1) How can I hide the grid lines while still showing the legend?

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

2) Currently, from the code, the legend at the top of the chart and data labels are only responding to this code below and not the label under datasets: Is there a problem here as well?

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

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

1 个解决方案

#1

1. To remove the gridlines on your example just delete all your scales config. Just remove the below code. See this forked version.

   要删除示例中的网格线,只需删除所有比例配置。只需删除以下代码即可。看到这个分叉版本。

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

   The reason this should be removed is because a pie chart does not have an x or y axis. By adding this config you end up forcing chart.js to render the grid along with the pie chart.

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

2. Pie and doughnut charts act a bit different from bar and line charts in that the dataset label is ignored. Only the data labels array is used to generate the legend and tooltips. Here is an example data config to explain what i mean.

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

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