替换 Canvas 饼图 Onclick

Question

我有一个使用 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>

有什么办法吗？

Answer 1

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

中的数据作为第一个参数

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

动态绘制数据

替换 Canvas 饼图 Onclick

Replace a Canvas Pie Chart Onclick

javascript

jquery

html5-canvas

chart.js