Question

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

起初，我试图通过访问图表插件的功能和更改网格线的内容来扩展图表插件，但是却无能为力。后来，我找到了这个plugin ，并认为这是我的解决方案，但两者都不是。我也发现了这个afterFit事件，它在偏移量上有回调，并试图操纵它，但也没有任何效果。顺便说一句，我正在使用chart.js for vue.js，当然还有vue.js。这些网格线必须是恒定的，并且不能移动或更改其位置。我开始认为没有办法解决chart.js问题

Answer 1

在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/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>

Answer 2

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

C3.js可用here。

Answer 3

查看您在刻度内定义的刻度字典> xAxes / yAxes。

选项autoskip：false和source：'data'应该起作用。

chart.js绘制自定义网格线

3 个答案: