单击CanvasJS饼图后重定向到特定页面

debugcn 发表于 Dev

路由器

我有CanvasJS呈现的下图：

我希望0.04％的条是可点击的。我该如何实现？

这是用于显示该图的代码：

    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2",
                animationEnabled: true,
                title: {
                    text: "Snapshots report status - <?php echo setDateOnChart() ?>"
                },
                data: [{
                    type: "pie",
                    indexLabel: "{y}",
                    yValueFormatString: "#,##0.00\"%\"",
                    indexLabelPlacement: "inside",
                    indexLabelFontColor: "#36454F",
                    indexLabelFontSize: 18,
                    indexLabelFontWeight: "bolder",
                    showInLegend: true,
                    legendText: "{label}",
                    dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
            }
        }
    </script>

路由器

使用以下链接（感谢@acbay），我解决了我的问题。这是我使用的代码：

    <script>
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2",
                animationEnabled: true,
                title: {
                    text: "Snapshots report status - <?php echo setDateOnChart() ?>"
                },
                data: [{

                    click: function (e) {
                        if (e.dataPoint.label !== "Success") {
                            // it also checks that the dataPoint label isn't success
                            // since I don't want the user to click on the success part
                            window.open('http://localhost/...', "_blank");
                        }
                    },

                    type: "pie",
                    indexLabel: "{y}",
                    yValueFormatString: "#,##0.00\"%\"",
                    indexLabelPlacement: "inside",
                    indexLabelFontColor: "#36454F",
                    indexLabelFontSize: 18,
                    indexLabelFontWeight: "bolder",
                    showInLegend: true,
                    legendText: "{label}",
                    dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
        }
    </script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。