如何更改 chartjs 中的背景并删除背景线?
how to change background in chartjs and remove background lines?
如何更改背景颜色,删除此行,以及如何更改一些 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
}
}]
}
}
});
};
change background color
使用 css 设置 canvas (图表) 元素的背景颜色:
canvas {
background-color: rgba(47, 152, 208, 0.1);
}
remove grid-lines
将 x 轴和 y 轴的 display
属性 设置为 false
:
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
change text of tooltip's label (add $ symbol)
为工具提示标签使用回调函数,例如:
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.
如何更改背景颜色,删除此行,以及如何更改一些 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
}
}]
}
}
});
};
change background color
使用 css 设置 canvas (图表) 元素的背景颜色:
canvas {
background-color: rgba(47, 152, 208, 0.1);
}
remove grid-lines
将 x 轴和 y 轴的 display
属性 设置为 false
:
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
}
}]
}
change text of tooltip's label (add $ symbol)
为工具提示标签使用回调函数,例如:
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.