chart.js - 如何更改chartjs中的背景并删除背景线？

Question

如何更改背景颜色，并删除此行，以及如何更改一些 tex，

例如：点的文本，当你将鼠标悬停在某个点上时，你会得到这个的标题和值。

我的js

function creating_chart(get_wrapper,type_of_chart, labels_of_chart, data_of_charts, title_of_chart){
                var ctx = document.getElementById(get_wrapper).getContext('2d');
                var myChart = new Chart(ctx, {
                    type: type_of_chart,
                    data: {
                        labels: labels_of_chart,
                        datasets: [{
                            label: title_of_chart,
                            data: [2220, 19998, 55547, 55784, 999985], //data_of_charts
                            backgroundColor: [
                                'rgba(47, 152, 208, 0.2)',
                            ],
                            borderColor: [
                                'rgba(19, 247, 228,1)',
                            ],
                            borderWidth: 2,
                            pointBackgroundColor: 'rgba(19, 247, 228,1)',
                            pointBorderColor: 'rgba(19, 247, 228,1)',
                            pointBorderWidth: 5,
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });
            };

Answer 1

改变背景颜色

使用 css 为画布（图表）元素设置背景颜色：

canvas {
   background-color: rgba(47, 152, 208, 0.1);
}

删除网格线

将displaygridLines 的属性设置false为 x 和 y 轴：

scales: {
   xAxes: [{
      gridLines: {
         display: false
      }
   }],
   yAxes: [{
      gridLines: {
         display: false
      }
   }]
}

更改 tooltip标签的文本（ 添加 $ 符号）

为工具提示标签使用回调函数，如下所示：

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = d.datasets[t.datasetIndex].data[t.index];
         return xLabel + ': $' + yLabel;
      }
   }
}

看一个工作示例。