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

发布于 2022-09-05 02:51:57 字数 2023 浏览 12 评论 0

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

我需要在移动端上面使用

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

坠似风落 2022-09-12 02:51:57
<LineExample id="myChart"></LineExample>

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文