Question

我一直在通过示例学习使用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的{{1}}标记，但是我不知道该在哪里。 Chart.js饼图的所有其他示例在生成图形时都使用了完全不同的方法，尽管我确实理解这些方法，但我不太了解上面的方法。我应该在哪里添加generateLabel()标签？谢谢。

Answer 1

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>

该图例甚至可以单击，以便人们可以隐藏/显示特定值。

了解Chart.js并将图例添加到饼图

1 个答案: