替换画布饼图 Onclick答案

【问题标题】：Replace a Canvas Pie Chart Onclick替换画布饼图 Onclick
【发布时间】：2015-11-22 21:22:22
【问题描述】：

我有一个使用 chart.js 创建的饼图

下面是代码：

            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"
              }
       pieChart.Doughnut(PieData);

<canvas id="pieChart" style="width:60%; height:60%;"></canvas>

我想创建几个代表不同信息的不同饼图，但一次只想显示一个饼图。因此，当我单击下拉菜单时，我希望出现另一个饼图。基本上使用与上面相同的代码，但更改了 pieData[] 中的信息。

使用列表改变的代码是

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#" onclick="">Device</a></li>
</ul>

有什么办法吗？

【问题讨论】：

标签： javascript jquery html5-canvas chart.js

【解决方案1】：

请记住，只有数据会被更改，因为您希望所有内容都使用相同的画布，您可以创建一个函数，每次调用时都会在画布上绘制数据（请参阅函数接收将显示的数据作为第一个参数在画布中）

function selectData(id){
     if(id == 1){
       var data = []; //whatever i want to draw when option 1 is selected!
       DrawChart(data);
     }

     if(id == 2){
       var data = []; //whatever i want to draw when option 2 is selected!
       DrawChart(data);
     }
}

function DrawChart(data){    

    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas).Pie(data);
    //Demo with official documentation http://www.chartjs.org/docs/
    //var myPieChart = new Chart(ctx[0]).Pie(data,options);
    //var myDoughnutChart = new Chart(ctx[1]).Doughnut(data,options);
}

所以，您没有使用 html Select 小部件，您使用的是 UL，您可以使用：

<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="javascript:void(0)" onclick="selectData(1);">Browsers</a></li>
    <li><a href="javascript:void(0)" onclick="selectData(2);">Other things</a></li>
</ul>

虽然您可以设计一个更好的模式来解决您的问题，但这是一个快速的解决方案，可以帮助您了解如何使用 Chart.js 动态地绘制数据

【讨论】：