【问题标题】:Show values in Chart.js Pie chart parts在 Chart.js 饼图部件中显示值
【发布时间】:2017-10-24 11:40:45
【问题描述】:

我想使用chart.js(版本2.7.0)饼图来可视化网页上的数据。我需要使用通常有效的饼图。正如在http://www.chartjs.org/samples/latest/charts/pie.html 的示例页面上看到的那样,饼图部分上没有可见的数据,只有鼠标悬停。我想让它直接显示在零件中。我在文档中没有找到任何关于此的内容。这通常是可能的吗?如果可以,我该如何实现?

【问题讨论】:

    标签: javascript chart.js


    【解决方案1】:

    是的,这是可能的。您可以使用名为 - Chart.PieceLabel.js 的 Chart.js 插件来实现。

    这是一个基本的例子:

    var chart = new Chart(ctx, {
       type: 'pie',
       data: {
          labels: ['Jan', 'Feb', 'Mar'],
          datasets: [{
             data: [30, 40, 25],
             backgroundColor: 'rgba(0,119, 220, 0.2)'
          }]
       },
       options: {
          pieceLabel: {
             render: 'value' //show values
          }
       }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
    <script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
    
    <canvas id="ctx"></canvas>

    要了解有关此插件及其用例的更多信息,请参阅here

    【讨论】:

      猜你喜欢
      • 2015-07-14
      • 2017-09-26
      • 2017-06-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-21
      相关资源
      最近更新 更多