vue.js - 在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种 改不了

---

第三种 也不行

---

第4中 不行

我需要在移动端上面使用

解决方案

<LineExample id="myChart"></LineExample>

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

这篇关于vue.js - 在vue中 怎么更改chart图表的文字大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！