chart.js繪制自定義網格線

Question

我正在尋找繪制自定義網格的選項，而不是使用默認網格。 我想要的結果就是這個。

最初，我試圖通過訪問圖表插件的功能和更改網格線的內容來擴展圖表插件，但是卻無能為力。 后來我找到了這個插件 ，以為那是我的解決方案，但兩者都不是。 我也找到了此afterFit事件，並在偏移量上進行了回調，並試圖對其進行操作，但也沒有任何效果。 順便說一句，我正在為Vue.js使用chart.js ，當然也將其與vue.js一起使用。 這些網格線必須是恆定的，並且不能移動或更改其位置。 我開始認為沒有辦法解決chart.js問題

Answer 1

對於將來的讀者，我無法使用chart.js創建自定義網格線。 所述C3.js包中包含用於網格線更定制選項，並給出提供定制/用戶定義的網格線中，所描述的選項這里 。

C3.js 在這里可用。

Answer 2

在vue-chartjs ， renderChart()的第二個參數是圖表的選項配置 ，其中可以包含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 3

查看您在刻度內定義的刻度字典> xAxes / yAxes。

選項autoskip：false和source：'data'應該起作用。