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>

Answer 1

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

它由yValueFormatString: "##0.00\"%\""转换为百分比。 this document可能对您有帮助。

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

以及位于here的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>

Answer 2

您可以通过删除yValueFormatString: "##0.00\"%\""并将indexLabel: "{label} {y}"替换为indexLabel: "{label} #percent%"来显示百分比。

function getPieChart(rawData) { 
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
       
        data: [{
            type: "pie",
            startAngle: 240,
            indexLabel: "{label} #percent%",
            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>

有关更多详细信息，请参见indexLabel文档。

将金额转换为百分比饼图js

2 个答案: