如何基于Anychart环形图数据动态设置中心独立标签的胜率

要实现基于图表数据动态计算并显示胜率，只需完成以下简单修改：

1. 提取数据并计算胜率
   将图表数据单独存储为变量，方便后续获取数值进行计算。通过「胜场数 / (胜场数+负场数) × 100」得到胜率百分比，可根据需求用Math.round()取整，或toFixed()保留指定小数位数。

2. 动态设置中心标签文本
   把原来硬编码的"80%"替换为计算得到的胜率值即可。

以下是修改后的完整代码：

<html>
    <head>
        <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
        <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-pie.min.js"></script>
    </head>

    <body>
        <script>
            anychart.onDocumentReady(function () {
                // 单独存储图表数据，便于后续计算和修改
                var chartData = [
                    ['Winner', 12],
                    ['Looser', 3]
                ];
                
                // 创建环形图
                var chart = anychart.pie(chartData);
                
                // 图表基础配置
                chart
                    .title('% WIN RATIO')
                    .radius('50%')
                    .innerRadius('60%');

                // 计算胜率
                var wins = chartData[0][1];
                var losses = chartData[1][1];
                // 用Math.round取整，若需保留1位小数可改用 (wins/(wins+losses)*100).toFixed(1)
                var winRatio = Math.round((wins / (wins + losses)) * 100);

                // 配置中心标签
                var label = anychart.standalones.label();
                label.text(`${winRatio}%`); // 动态设置胜率文本
                label.width("100%");
                label.height("100%");
                label.fontColor("grey");
                label.hAlign("center");
                label.vAlign("middle");
                label.fontSize("22");

                // 禁用图例
                chart.legend().enabled(false);

                // 将标签设置为环形图中心内容
                chart.center().content(label);

                // 提示框配置
                chart.tooltip().title("Volume");
                chart.tooltip().format("{%value} Trades");

                // 禁用扇区标签
                chart.labels(false);

                // 绑定容器并绘制图表
                chart.container('container');
                chart.draw();
            });
        </script>

        <div id="container"></div>
    </body>
</html>

关键修改说明 #

• 把数据存入chartData变量，后续修改数据时只需更新这个数组，胜率会自动重新计算。
• 通过算术运算动态生成胜率，完全基于图表数据，无需手动修改硬编码值。
• 使用模板字符串${winRatio}%简洁拼接数值与百分号，也可改用传统字符串拼接方式：winRatio + "%"。

内容的提问来源于stack exchange，提问作者Greg Martin