单击 CanvasJS 饼图后重定向到特定页面
Redirect to specific page after clicking on CanvasJS pie chart
我有 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>
使用 the following link(感谢@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>
我有 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>
使用 the following link(感谢@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>