chart.js绘制自定义网格线

Question

我正在寻找绘制自定义网格而不是使用默认网格的选项。我想要的结果是这一个。

起初我尝试通过访问其功能和更改网格线的内容来扩展图表插件，但无法做任何我想做的事情。后来我发现这个plugin 并认为这是我的解决方案，但事实并非如此。此外，我发现这个afterFit事件与抵消回调，并试图操纵它，但也没有。顺便说一句，我正在使用chart.js for vue.js，当然还有vue.js.那些网格线必须是恒定的，不能移动或改变它的位置。我开始认为没有选择用chart.js解决问题

Answer 1

对于未来的读者，我无法使用chart.js创建自定义网格线。 C3.js包中包含更多针对网格线的自定义选项，并提供了提供自定义/用户定义网格线的选项，描述了here。

C3.js可用here。

Answer 2

在vue-chartjs中，renderChart()的第二个参数是图表的options config，它可以包含scales.xAxes和scales.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/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.js"></script>
<div class="app">
  <line-chart></line-chart>
</div>

Answer 3

查看在scale> xAxes / tAxes中定义的ticks字典。

选项autoskip：false和source：'data'应该有效。