如何更改chartjs / vue-chartjs中某些线的颜色?

bwleehnv  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(180)

我注意到默认的条形图总是有一条较暗的零线。我还注意到-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,
          },
        },
      },
    },
  });
p8ekf7hl

p8ekf7hl1#

答案是网格线www.example.com中的zeroLineColorhttps://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

相关问题