我注意到默认的条形图总是有一条较暗的零线。我还注意到-1.0处的水平线也较暗。我希望这些颜色与网格相同。我该怎么做?
下面显示了一个基本示例:https://jsfiddle.net/Lnv3cmz0/1/
Vue.component('chart', {
template:`
<canvas></canvas>
`,
props:['type'],
mounted(){
this._chart = new Chart(this.$el, {
type:this.type,
data:[],
})
},
})
//App setup
new Vue({
el:'#vue',
})
更新:
zeroLine选项似乎不再可用。我使用的是最新/最好的图表(v4.2.0),不再出现此问题。下面是我正在执行的操作的示例
const ctx = document.getElementById('chart') as HTMLCanvasElement;
chart.value = new Chart(ctx, {
type: 'bar',
data: {
datasets: [],
},
options: {
onClick: (evt) => handleOnClick(evt),
interaction: {
mode: 'nearest',
},
plugins: {
legend: {
labels: {
generateLabels(chart) { // other code here }}
}
},
title: {
display: true,
text: 'My Super cool Chart',
},
},
scales: {
x: {
grid: {
color: () => myBackgroundColor,
},
beginAtZero: false,
ticks: {
callback: (value) => doSomethingOnCallaback(value),
// fontColor: myBackgroundColor,
},
type: 'linear',
},
y: {
grid: {
color: () => myBackgroundColor,
},
max: myStart,
min: myEnd,
beginAtZero: false,
ticks: {
callback: (value) => `Tick ${value}`,
stepSize: 15.0,
},
},
},
},
});
1条答案
按热度按时间p8ekf7hl1#
答案是网格线www.example.com中的zeroLineColorhttps://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration