了解Chart.js并将图例添加到饼图-Java 学习之路

我一直在学习使用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>

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

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>

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

回复于 2024-04-25T23:41:42+08:00

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

1 回答

相关问题