我使用 Chart.js 在 Canvas 中创建圆环图
代码:
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome"
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE"
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox"
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari"
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera"
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator"
}
];
var pieOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 1,
percentageInnerCutout: 50,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
responsive: true,
maintainAspectRatio: false,
}
<canvas id="pieChart"></canvas>
当我单击列表项时,我想删除当前的饼图并用新的饼图替换它。我尝试过使用 destroy() 方法,但没有效果
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#" onclick="">Device</a></li>
</ul>
有人可以帮忙吗?
最佳答案
当您首先单击列表时,您可以将innerHtml设置为空以删除图表元素的内容,例如
document.getElementById('pieChart').innerHtml = '';
然后在其中绘制一个新图表。
关于javascript - 从 Canvas 中删除饼图并替换为另一个饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32246760/