在vue中 怎么更改chart图表的文字大小

import {Line} from 'vue-chartjs'

export default Line.extend({
  data () {
    return {
      gradient: null,
      gradient2: null
    }
  },
  mounted () {
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)


    this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
    this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          borderColor: '#FC2525',
          pointBackgroundColor: 'white',
          borderWidth: 1,
          pointBorderColor: 'white',
          backgroundColor: this.gradient,
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})


    var chartLine = null;
    window.onload = function () {
      var ctx = document.getElementById("myChart").getContext("2d");

      chartLine = new Chart(ctx).Line(data, {
        scaleFontSize : 20,
      });

    }
  }
});

html

<template>
  <div id="app">
    <div class="container">
      <div class="Chart__list">
        <div class="Chart">
          <LineExample id="myChart"></LineExample>
        </div>
      </div>
    </div>
  </div>
</template>

第2种 改不了

clipboard.png


第三种 也不行

clipboard.png


第4中 不行

clipboard.png

我需要在移动端上面使用

阅读 5.9k
1 个回答
<LineExample id="myChart"></LineExample>

这句代码上面有ref=canvas吗?
没有改成<LineExample id="myChart" ref="canvas"></LineExample>试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题