ChartJS變化曲線圖基於下拉選項

我試圖確定正確的方式，每個用戶選擇一個新的圖表類型ChartJS時間來重新加載畫布，現在它不會更改圖表類型：ChartJS變化曲線圖基於下拉選項

chartJs .js文件

var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 200; 
    var determineChart = document.getElementById("chartType"); 
    if(determineChart = "line") { 
     var myChart = new Chart(ctx).Line(data, options); 
     myChart.destroy(); 
    } 
    else if (determineChart = "column"){ 
     var myChart = new Chart(ctx).Bar(data, options); 

    }

的index.html

<select id="chartType"> 
    <option value="line">Line</option> 
    <option value="column">Column</option> 
    <option value="area">Area</option> 
    <option value="areaspline">Area Spline</option> 
    <option value="pie">Pie(Test)</option> 
</select>

來源

2015-10-21 user2402107

的一個問題是在條件檢查中使用賦值運算符（=）而不是邏輯運算符（==或===）。此外，我不會將if/else邏輯與可用圖表類型結合使用。

var ctx = document.getElementById("myChart").getContext("2d"); 
 
ctx.canvas.width = 600; 
 
ctx.canvas.height = 200; 
 

 
var dataMap = { 
 
    'line': { 
 
     method: 'Line', 
 
     data: { 
 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
      datasets: [{ 
 
       label: "My First dataset", 
 
       fillColor: "rgba(220,220,220,0.5)", 
 
       strokeColor: "rgba(220,220,220,0.8)", 
 
       highlightFill: "rgba(220,220,220,0.75)", 
 
       highlightStroke: "rgba(220,220,220,1)", 
 
       data: [65, 59, 80, 81, 56, 55, 40] 
 
      }, { 
 
       label: "My Second dataset", 
 
       fillColor: "rgba(151,187,205,0.5)", 
 
       strokeColor: "rgba(151,187,205,0.8)", 
 
       highlightFill: "rgba(151,187,205,0.75)", 
 
       highlightStroke: "rgba(151,187,205,1)", 
 
       data: [28, 48, 40, 19, 86, 27, 90] 
 
      }], 
 
     } 
 
    }, 
 
    'pie': { 
 
     method: 'Pie', 
 
     data: [{ 
 
      value: 300, 
 
      color: "#F7464A", 
 
      highlight: "#FF5A5E", 
 
      label: "Red" 
 
     }, { 
 
      value: 50, 
 
      color: "#46BFBD", 
 
      highlight: "#5AD3D1", 
 
      label: "Green" 
 
     }, { 
 
      value: 100, 
 
      color: "#FDB45C", 
 
      highlight: "#FFC870", 
 
      label: "Yellow" 
 
     }] 
 
    } 
 
}; 
 

 
var currentChart; 
 

 
function updateChart() { 
 
    if(currentChart){currentChart.destroy();} 
 
    
 
    var determineChart = $("#chartType").val(); 
 

 
    var params = dataMap[determineChart] 
 
    currentChart = new Chart(ctx)[params.method](params.data, {}); 
 
} 
 

 
$('#chartType').on('change', updateChart) 
 
updateChart();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js'></script> 
 
<canvas id="myChart"></canvas> 
 
<select id="chartType"> 
 
    <option value="line">Line</option> 
 
    <option value="pie">Pie</option> 
 
</select>

來源

2015-10-21 13:46:14 Origineil

你有一個bug在你的代碼，其中切換，如果你將鼠標懸停在沒用過這個特殊的圖表框架的中心 – user2402107

當你的圖表留在畫布上。看起來只是一個[摧毀]（http://stackoverflow.com/questions/24815851/how-do-clear-a-chart-from-a-canvas-so-that-hover-events-cannot-be-triggered）是需要的。 – Origineil

ChartJS變化曲線圖基於下拉選項

回答

相關問題