javascript - 从金额转换为百分比饼图js

Question

我有一个图表，但是当它获取日期时，它只显示每个标签的数量而不转换为百分比需要帮助

function getPieChart(rawData) {

    console.log(rawData);
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
       
        data: [{
            type: "pie",
            startAngle: 240,
            yValueFormatString: "##0.00\"%\"",
            indexLabel: "{label} {y}",
            dataPoints: rawData
        }]
    });
    chart.render();

}

getPieChart([
    { y: 444, label: "Abuja Hqrs" },
    { y: 176, label: "Kano" },
    { y: 266, label: "Alausa" },
    { y: 221, label: "Portharcourt" },
    { y: 3717, label: "Ikoyi" }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>

<div id="chartContainer"></div>

标签： javascript

Answer 1

您可以通过更改属性yValueFormatString和设置格式indexLabel。

它被转换为百分比yValueFormatString: "##0.00\"%\""。本文档可能对您有所帮助。

例如，如果您想将格式描述为[$34]，请设置yValueFormatString: "[$##]"

以及此处的 indexLabel 的详细信息

请参阅以下片段：

function getPieChart(rawData) {
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
       
        data: [{
            type: "pie",
            startAngle: 240,
            yValueFormatString: "##", // does not need
            indexLabel: "{label} is {y}",
            dataPoints: rawData
        }]
    });
    chart.render();

}

getPieChart([
    { y: 444, label: "Abuja Hqrs" },
    { y: 176, label: "Kano" },
    { y: 266, label: "Alausa" },
    { y: 221, label: "Portharcourt" },
    { y: 3717, label: "Ikoyi" }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha512-FJ2OYvUIXUqCcPf1stu+oTBlhn54W0UisZB/TNrZaVMHHhYvLBV9jMbvJYtvDe5x/WVaoXZ6KB+Uqe5hT2vlyA==" crossorigin="anonymous"></script>

<div id="chartContainer"></div>