文章/答案/技术大牛

发布

社区首页 >问答首页 >Chart.js v3:如何在我的图表中增加图例的字号？

问Chart.js v3:如何在我的图表中增加图例的字号？
EN

Stack Overflow用户

提问于 2021-07-02 14:28:19

回答 1查看 36关注 0票数 0

我将Chart.js HTML page从2.7版迁移到3.4版，只剩下一个问题。

图例的字体大小不能更改。

我尝试了下面的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js"></script>

            legend:
                { font: { size: 80 }
                , title: 
                    { display: true
                    , font: { size: 80 }
                    , color: 'Green'
                    }
                ,labels:
                    { font: { size: 80 }
                    , color: 'Green'
                    }             
                },

但是字体的大小不变！

我该怎么做才能使图例字体的大小更大？

在下图中，您可以看到我的图表的图例(k=1、k=2、...、k=8)。

fonts

chart.js

legend

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-02 16:50:35

我假设你在错误的地方有你的图例选项：

正如迁移指南中所述，图例、插件工具提示和标题已移至插件部分。

示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            size: 30
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68220536

复制

相似问题

问Chart.js v3:如何在我的图表中增加图例的字号？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js v3:如何在我的图表中增加图例的字号？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js v3:如何在我的图表中增加图例的字号？
EN