时间戳

首页 > 解决方案 > 了解 Chart.js 并为饼图添加图例

javascript - 了解 Chart.js 并为饼图添加图例

问题描述

我一直在通过示例学习使用 Chart.js，并且正在查看该网站的示例：

https://pythonspot.com/flask-and-great-looking-charts-using-chart-js/

我正在尝试查看如何在他们的饼图中添加图例，并且从我阅读的文档/其他帖子中，看起来我需要添加一个

这是饼图的代码当前的样子：

# Variables passed onto render_template() in Flask:
values = [1, 2, 3, 4, 5, 6, 7]
labels = ["A", "B", "C", "D", "E", "F", "G"]
colors = ["#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA","#ABCDEF", "#DDDDDD", "#ABCABC"]

set = zip(values, labels, colors]

JavaScript 代码：

<canvas id="chart" width="600" height="400"></canvas>
<script>
  var pieData = [
    {% for item, label, colors in set %}
      {
        value: {{item}},
        label: "{{label}}",
        color : "{{colors}}"
      },

    {% endfor %}
  ];
  // get bar chart canvas
  var mychart = document.getElementById("chart").getContext("2d");
  steps = 10
  max = {{ max }}

  // draw pie chart
  new Chart(document.getElementById("chart").getContext("2d")).Pie(pieData);
</script>

据我了解，我需要在脚本中的某处添加一个options标签generateLabel()，但我不知道在哪里。Chart.js 饼图的所有其他示例都使用完全不同的方法来生成图形，虽然我理解这些，但我不太理解上面的方法。我应该在哪里添加options标签？谢谢你。

标签： javascripthtmlchart.js

解决方案

var values = [1, 2, 3, 4, 5, 6, 7];
var labels = ["A", "B", "C", "D", "E", "F", "G"];
var colors = ["#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA","#ABCDEF", "#DDDDDD", "#ABCABC"];


var chart = new Chart(document.getElementById("chart"), {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        label: "Series 01",
        backgroundColor: colors,
        data: values
      }]
    },
    options: {
      title: {
        display: true,
        text: 'just a code snippet ...'
      },
      legend: {
        labels: {
          /* here one can adjust the legend's labels, if required */
          // generateLabels: function(chart) {}
        }
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart" width="100%" height="100%"></canvas>

该图例甚至可以点击，因此可以隐藏/显示特定值。

推荐阅读