起初，我试图通过访问图表插件的函数和更改网格线的内容来扩展它，但却做不到我想要的任何事情。后来我发现这个插件，并认为这是我的解决方案，但它不是两者都没有。我还发现这个afterFit事件带有对偏移量的回调，并试图对其进行操作，但也没有任何结果。顺便说一句，我用的是图表。用于vue的js。js，当然还有vue。js。这些网格线必须是恒定的，不能移动或改变其位置。我开始认为用图表解决这个问题没有任何选择。js
在vue chartjs中，renderChart（）的第二个参数是图表的选项配置，它可以包含比例。xAxes和比例。用于设置轴（即网格）颜色的yAxes属性：
this.renderChart( /* data */ , {
scales: {
xAxes: [{
display: true,
gridLines: {
display: true,
color: '#eee'
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: '#eee'
},
}]
}
})
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
],
}, {
responsive: true, maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
gridLines: {
display: true,
color: '#444'
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: '#444'
},
}]
}
})
}
})
new Vue({
el: '.app',
}).app {
background-image: radial-gradient(#2e3f61, #131b29);
}<script src="https://unpkg.com/vue@2.5.16"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.0.1-rc2/dist/vue-chartjs.js"></script>
<div class="app">
<line-chart></line-chart>
</div>
对于未来的读者，我无法使用图表创建自定义网格线。js。C3。js包包含了更多的网格线自定义选项，并提供了提供自定义/用户定义网格线的选项，如下所述。
C3。js在这里可用。
查看您在刻度内定义的刻度字典
选项autoskip:false和source:“data”应该可以工作。
