【问题标题】:How to customize Y-Axis label in Chart.js with Vue.js?如何使用 Vue.js 在 Chart.js 中自定义 Y 轴标签?
【发布时间】:2019-12-29 09:30:27
【问题描述】:

我在 Stackoverflow 中看到了很多解决方案,但没有人能解决我的问题。

我想更改我的 y 轴值的比例。

会的

0 100 200 300

我的代码:

yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                stepSize: 100,
                min: 0,
                max: 300
              }
            }]
          },
          axisLabel: {//},
        }],
        series: [{
          //
          lineStyle: {//},
          areaStyle: {
            normal: {
              //
          },
     itemStyle: {
       normal: {
         //
    }
  },
  data: [236, 0]
}]

我也改了。

axisTick: {
    show: false
}

【问题讨论】:

    标签: vue.js charts echarts vue-chartjs


    【解决方案1】:

    请使用this live example 将您的设置与示例的工作设置进行比较。

    var options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
                {
                    label: '# of Points',
                    data: [236, 0],
                    borderWidth: 1
                }
            ]
      },
      options: {
        scales: {
            yAxes: [{
            ticks: {
              min: 0,
              max: 300,
              stepSize: 100,
              reverse: false,
              beginAtZero: true
            }
          }]
        }
      }
    }
    

    【讨论】:

    • 要自定义 lebels,您可以使用 thisvar chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { yAxes: [{ ticks: { min: 0, max: 300, stepSize: 100, reverse: false, callback: function(value, index, values) { return '$' + value; } } }] } } });
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多