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

请记住，只有数据会因为你想要一样的画布而改变，你可以创建一个函数，每次调用时在画布上绘制数据（参见函数receive作为第一个参数，将显示的数据）在画布上）

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绘制数据。

替换画布饼图Onclick

1 个答案: