使用 Chart.js 显示与标签连接的计数

Question

我正在使用 Chart.js 构建饼图，有什么方法可以将计数连接到标签（在饼图图例中显示数字和百分比）？

createChart : function() {
    debugger;
    var chartData = [60, 90, 120, 150];
    var chartLabels = ['apples','bananas','oranges','pears'];
    var chartCanvas = component.find("chart").getElement();

    var chart = new Chart(chartCanvas, {
        type: 'pie',
        data: {
            labels: chartLabels,
                datasets: [
                    {
                        label: "test",
                        data: chartData,
                        borderWidth: 0,
                        backgroundColor: [
                            "#f43004",
                            "#decf3f",
                            "#FFA500"
                        ]
                    }
                ]
            },
            options: {
                cutoutPercentage: 1,
                maintainAspectRatio: false,
                legend: {
                    display: true,
                    position:'right',
                    fullWidth:false,
                    reverse:true,
                    labels: {
                        fontColor: '#000',
                        fontSize:10,
                        fontFamily:"Arial, sans-serif SANS_SERIF"
                    },
                    layout: {
                        padding: 70,
                    }
                }
            }
        });
    }

我正在尝试构建这样的图表：

请提供任何建议或指示来实现这一目标。

先感谢您。

Answer 1

您可以使用html-legends功能来自定义 Chart.js 图例：

\n\n

legendCallback : function (chart) {\n    var text = [];\n    text.push(\'<ul class="0-legend">\');\n    var ds = chart.data.datasets[0];\n    var sum = ds.data.reduce(function add(a, b) {\n            return a + b;\n        }, 0);\n    for (var i = 0; i < ds.data.length; i++) {\n        text.push(\'<li>\');\n        var perc = Math.round(100 * ds.data[i] / sum, 0);\n        text.push(\'<span style="background-color:\' + ds.backgroundColor[i] + \'">\' + \'</span>\' + chart.data.labels[i] + \' (\' + ds.data[i] + \') (\' + perc + \'%)\');\n        text.push(\'</li>\');\n    }\n    text.push(\'</ul>\');\n    return text.join("");\n}\n

\n\n

这是一个小提琴：https://jsfiddle.net/beaver71/b5hdn9gw/

\n\n

\r\n

\r\n

legendCallback : function (chart) {\n    var text = [];\n    text.push(\'<ul class="0-legend">\');\n    var ds = chart.data.datasets[0];\n    var sum = ds.data.reduce(function add(a, b) {\n            return a + b;\n        }, 0);\n    for (var i = 0; i < ds.data.length; i++) {\n        text.push(\'<li>\');\n        var perc = Math.round(100 * ds.data[i] / sum, 0);\n        text.push(\'<span style="background-color:\' + ds.backgroundColor[i] + \'">\' + \'</span>\' + chart.data.labels[i] + \' (\' + ds.data[i] + \') (\' + perc + \'%)\');\n        text.push(\'</li>\');\n    }\n    text.push(\'</ul>\');\n    return text.join("");\n}\n

\r\n

var ctx = document.getElementById("myChart").getContext(\'2d\');\r\n\r\nvar chartData = [60, 90, 120, 150];\r\nvar chartLabels = [\'apples\',\'bananas\',\'oranges\',\'pears\'];\r\n\r\nvar chart = new Chart(ctx, {\r\n  type: \'pie\',\r\n  data: {\r\n    labels: chartLabels,\r\n    datasets: [{\r\n      backgroundColor: [\r\n        "#f43004",\r\n        "#decf3f",\r\n        "#FFA500",\r\n        "#9b59b6",\r\n      ],\r\n      data: chartData\r\n    }]\r\n  },\r\n  options: {\r\n    legend: {\r\n      display: false\r\n    },\r\n    legendCallback: function(chart) {\r\n      var text = [];\r\n      text.push(\'<ul class="0-legend">\');\r\n      var ds = chart.data.datasets[0];\r\n      var sum = ds.data.reduce(function add(a, b) { return a + b; }, 0);\r\n      for (var i=0; i<ds.data.length; i++) {\r\n        text.push(\'<li>\');\r\n        var perc = Math.round(100*ds.data[i]/sum,0);\r\n        text.push(\'<span style="background-color:\' + ds.backgroundColor[i] + \'">\' + \'</span>\' + chart.data.labels[i] + \' (\'+ds.data[i]+\') (\'+perc+\'%)\');\r\n        text.push(\'</li>\');\r\n      }\r\n      text.push(\'</ul>\');\r\n      return text.join("");\r\n    }\r\n  }\r\n});\r\n\r\nvar myLegendContainer = document.getElementById("legend");\r\n// generate HTML legend\r\nmyLegendContainer.innerHTML = chart.generateLegend();\r\n// bind onClick event to all LI-tags of the legend\r\nvar legendItems = myLegendContainer.getElementsByTagName(\'li\');\r\nfor (var i = 0; i < legendItems.length; i += 1) {\r\n  legendItems[i].addEventListener("click", legendClickCallback, false);\r\n}\r\n\r\nfunction legendClickCallback(event) {\r\n  event = event || window.event;\r\n\r\n  var target = event.target || event.srcElement;\r\n  while (target.nodeName !== \'LI\') {\r\n    target = target.parentElement;\r\n  }\r\n  var parent = target.parentElement;\r\n  var chartId = parseInt(parent.classList[0].split("-")[0], 10);\r\n  var chart = Chart.instances[chartId];\r\n  var index = Array.prototype.slice.call(parent.children).indexOf(target);\r\n  var meta = chart.getDatasetMeta(0);\r\n  console.log(index);\r\n\tvar item = meta.data[index];\r\n\r\n  if (item.hidden === null || item.hidden === false) {\r\n    item.hidden = true;\r\n    target.classList.add(\'hidden\');\r\n  } else {\r\n    target.classList.remove(\'hidden\');\r\n    item.hidden = null;\r\n  }\r\n  chart.update();\r\n}

\r\n

body {\r\n    font-family: \'Arial\';\r\n}\r\n\r\n.container { \r\n  margin: 15px auto;\r\n}\r\n\r\n#chart {\r\n  float: left;\r\n  width: 70%;\r\n}\r\n\r\n#legend {\r\n  float: right;\r\n}\r\n\r\n[class$="-legend"] {\r\n  list-style: none;\r\n  cursor: pointer;\r\n  padding-left: 0;\r\n}\r\n\r\n[class$="-legend"] li {\r\n  display: block;\r\n  padding: 0 5px;\r\n}\r\n\r\n[class$="-legend"] li.hidden {\r\n  text-decoration: line-through;\r\n}\r\n\r\n[class$="-legend"] li span {\r\n  border-radius: 5px;\r\n  display: inline-block;\r\n  height: 10px;\r\n  margin-right: 10px;\r\n  width: 10px;\r\n}

\r\n

\r\n

\r\n

\n