Заменить Canvas Pie Chart 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

Помня о том, что только данные будут изменены, потому что вы хотите иметь один и тот же холст для всего, вы можете создать функцию, которая вызывается на каждом холсте каждый раз (см. Функцию в качестве первого параметра, данные, которые будут отображается на холсте)

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 Выберите виджет, который вы используете в 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> 

Хотя вы можете создать лучший режим решить вашу проблему, это быстрое решение, которое поможет y ou, чтобы понять, как делать данные динамически с помощью Chart.js