javascript - Chartjs - 如何更改圆环图的符号

Question

我使用下面的代码创建了一个圆环图

   var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
            responsive: true
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx, config);
    };

<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<script src="http://www.chartjs.org/dist/2.7.0/Chart.bundle.js"></script>
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>

并且会显示如下图，

是否有任何选项可以更改如下图所示的图形符号？我试图检查文档，但找不到任何可以更改的内容。

Answer 1

我想您需要使用 onAnimationComplete 方法循环遍历每个 datasets 和 metadata 来重建工具提示值以制作它们作为值(value)观。

这是一个演示，

https://jsfiddle.net/c8Lk2381/246/

HTML

<canvas id="chart" height="450" width="640"></canvas>

Javascript

tooltip.transition(Chart.helpers.easingEffects.linear).draw();
            }, self);
        }, self);
    }
},
    data: {
        datasets: [{
            data: [
                2,
                4,
                7,
                1,
                6,
            ],
            backgroundColor: [
                "Red",
                "Green",
                "Yellow",
                "Grey",
                "Purple",
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow",
            "Grey",
            "Purple"
        ]
    },
};

var ctx = document.getElementById("chart").getContext("2d");
var doughnutchart = new Chart(ctx, doughnutChartConfig);

希望这对您有所帮助!