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

希望這可以幫助！