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，以重建工具提示值，使其成为值。

这是一个演示，

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);

希望这有帮助！