動態創建的折線圖保存以前的數據值

我使用chart.js繪製折線圖。當過濾器被改變時（在Ajax調用之後），圖應該根據過濾器而改變。儘管圖形發生了變化，但當我將鼠標指針移到圖上時，圖形會不斷變化 - 有時它會顯示新圖表，有些時刻會顯示上一個圖形。動態創建的折線圖保存以前的數據值

這裏是我的代碼:::

var data = { 
        labels: month, 
        datasets: [ 
         { 
          label: "Sanitation", 
          fillColor: "rgba(255,0,0,0.2)", 
          strokeColor: "rgba(255,0,0,1)", 
          pointColor: "rgba(255,0,0,1)", 
          pointStrokeColor: "#e74c3c", 
          pointHighlightFill: "#e74c3c", 
          pointHighlightStroke: "rgba(255,0,0,4)", 
          data: sanitationvalue 
         }, 
         { 
          label: "School Environment", 
          fillColor: "rgba(255,255,0,0.2)", 
          strokeColor: "rgba(255,255,0,1)", 
          pointColor: "rgba(255,255,0,1)", 
          pointStrokeColor: " #fcf3cf", 
          pointHighlightFill: " #fcf3cf", 
          pointHighlightStroke: "rgba(255,255,0,4)", 
          data: environmentvalue 
         }, 
         { 
          label: "Sports and Recreation", 
          fillColor: "rgba(0,0,255,0.2)", 
          strokeColor: "rgba(0,0,255,1)", 
          pointColor: "rgba(0,0,255,1)", 
          pointStrokeColor: " #85c1e9", 
          pointHighlightFill: " #85c1e9", 
          pointHighlightStroke: "rgba(0,0,255,4)", 
          data: recreationvalue 
         }, 
         { 
          label: "Water", 
          fillColor: "rgba(0,255,0,0.2)", 
          strokeColor: "rgba(0,255,0,1)", 
          pointColor: "rgba(0,255,0,1)", 
          pointStrokeColor: " #abebc6", 
          pointHighlightFill: " #abebc6", 
          pointHighlightStroke: "rgba(0,255,0,1)", 
          data: watervalue 
         } 
        ] 
       }; 
       var ctx = null; 
       $("#lineChart1").html(""); 
       //ctx = document.getElementById("lineChart1").innerHTML(""); 
       ctx = document.getElementById("lineChart1").getContext("2d"); 
       var options = { }; 
       var lineChart = null; 
       lineChart = new Chart(ctx).Line(data, options); 
       lineChart.update();

HTML ::

<div class="col-md-6 pull-left"> 
       <canvas id="lineChart1" height="450" width="800"></canvas> 
      </div>

來源

2017-08-08 OUN Ash

試試這個希望它會工作

$('#lineChart1').empty(); 
    var data = { 
    labels: month, 
    datasets: [ 
    { 
     label: "Sanitation", 
     fillColor: "rgba(255,0,0,0.2)", 
     strokeColor: "rgba(255,0,0,1)", 
     pointColor: "rgba(255,0,0,1)", 
     pointStrokeColor: "#e74c3c", 
     pointHighlightFill: "#e74c3c", 
     pointHighlightStroke: "rgba(255,0,0,4)", 
     data: sanitationvalue 
    }, 
    { 
     label: "School Environment", 
     fillColor: "rgba(255,255,0,0.2)", 
     strokeColor: "rgba(255,255,0,1)", 
     pointColor: "rgba(255,255,0,1)", 
     pointStrokeColor: " #fcf3cf", 
     pointHighlightFill: " #fcf3cf", 
     pointHighlightStroke: "rgba(255,255,0,4)", 
     data: environmentvalue 
    }, 
    { 
     label: "Sports and Recreation", 
     fillColor: "rgba(0,0,255,0.2)", 
     strokeColor: "rgba(0,0,255,1)", 
     pointColor: "rgba(0,0,255,1)", 
     pointStrokeColor: " #85c1e9", 
     pointHighlightFill: " #85c1e9", 
     pointHighlightStroke: "rgba(0,0,255,4)", 
     data: recreationvalue 
    }, 
    { 
     label: "Water", 
     fillColor: "rgba(0,255,0,0.2)", 
     strokeColor: "rgba(0,255,0,1)", 
     pointColor: "rgba(0,255,0,1)", 
     pointStrokeColor: " #abebc6", 
     pointHighlightFill: " #abebc6", 
     pointHighlightStroke: "rgba(0,255,0,1)", 
     data: watervalue 
    } 
    ] 
}; 
var ctx = null; 
$("#lineChart1").html(""); 
       //ctx = document.getElementById("lineChart1").innerHTML(""); 
       ctx = document.getElementById("lineChart1").getContext("2d"); 
       var options = { }; 
       var lineChart = null; 
       lineChart = new Chart(ctx).Line(data, options); 
       lineChart.update();

來源

2017-08-08 06:59:48

我已經加了兩個線解決了這個問題：

$('#lineDiv').html(''); 
$('#lineDiv').html('<canvas id="lineChart1" height="450" width="800"></canvas>');

下面是完整的代碼：

var data = { 
         labels: month, 
         datasets: [ 
          { 
           label: "Sanitation", 
           fillColor: "rgba(255,0,0,0.2)", 
           strokeColor: "rgba(255,0,0,1)", 
           pointColor: "rgba(255,0,0,1)", 
           pointStrokeColor: "#e74c3c", 
           pointHighlightFill: "#e74c3c", 
           pointHighlightStroke: "rgba(255,0,0,4)", 
           data: sanitationvalue 
          }, 
          { 
           label: "School Environment", 
           fillColor: "rgba(255,255,0,0.2)", 
           strokeColor: "rgba(255,255,0,1)", 
           pointColor: "rgba(255,255,0,1)", 
           pointStrokeColor: " #fcf3cf", 
           pointHighlightFill: " #fcf3cf", 
           pointHighlightStroke: "rgba(255,255,0,4)", 
           data: environmentvalue 
          }, 
          { 
           label: "Sports and Recreation", 
           fillColor: "rgba(0,0,255,0.2)", 
           strokeColor: "rgba(0,0,255,1)", 
           pointColor: "rgba(0,0,255,1)", 
           pointStrokeColor: " #85c1e9", 
           pointHighlightFill: " #85c1e9", 
           pointHighlightStroke: "rgba(0,0,255,4)", 
           data: recreationvalue 
          }, 
          { 
           label: "Water", 
           fillColor: "rgba(0,255,0,0.2)", 
           strokeColor: "rgba(0,255,0,1)", 
           pointColor: "rgba(0,255,0,1)", 
           pointStrokeColor: " #abebc6", 
           pointHighlightFill: " #abebc6", 
           pointHighlightStroke: "rgba(0,255,0,1)", 
           data: watervalue 
          } 
         ] 
        }; 
        var ctx = null; 

        $('#lineDiv').html(''); 
        $('#lineDiv').html('<canvas id="lineChart1" height="450" width="800"></canvas>'); 
        ctx = document.getElementById("lineChart1").getContext("2d"); 
        var options = { }; 
        var lineChart = null; 
        lineChart = new Chart(ctx).Line(data, options); 
        lineChart.update();

HTML是：

<div class="col-md-6 pull-left" id="lineDiv"> 
       <canvas id="lineChart1" height="450" width="800"></canvas> 
      </div>

來源

2017-08-08 07:05:01

動態創建的折線圖保存以前的數據值

回答

相關問題