简体   繁体   中英

Redirect to specific page after clicking on CanvasJS pie chart

I have the following diagram rendered by CanvasJS:

快照报告

I want the 0.04% bar to be clickable. How can I achieve this?

Here's the code used to display the diagram:

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

Using the following link (thanks to @acbay), I resolved my problem. Here's the code I used:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM