如何更改chartjs中的背景并删除背景线？答案

【问题标题】：how to change background in chartjs and remove background lines?如何更改chartjs中的背景并删除背景线？
【发布时间】：2017-10-17 15:59:29
【问题描述】：

如何改变背景颜色，去除这些线条，以及如何改变一些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
                                }
                            }]
                        }
                    }
                });
            };

【问题讨论】：

更改一些文本是什么意思？喜欢更改文本颜色或替换为其他内容？
@ɢʀᴜɴᴛ 我至少改变了背景，也就是去掉了线条，如果你改变了文字，那么这就是当你指向点的时候，显示美元符号和公制左边的总和，也加在那里！

标签： chart.js chartjs-2.6.0

【解决方案1】：

更改背景颜色

使用 css 为画布 (chart) 元素设置背景颜色：

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。

【讨论】：

@GRUNT 你不知道如何删除左边的数字，度量？
为 y 轴设置 ticks: {display: false}.. 见 - jsfiddle.net/dvL86vjr/1
@GRUNT 你太棒了）
@Grunt 谢谢！像魅力一样工作。
此解决方案还隐藏了沿 x 和 y 轴的线条。对于许多人来说，设置 drawOnChartArea: false 可能是更可取的行为。