如何更改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 （图表）元素设置背景颜色：

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

  

删除网格线

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

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

  

更改工具提示 标签的文字 （添加$符号）

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

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

查看working example。