ChartJSは、ズームインまたはズームアウト時にデータを表示します。

Question

実際には、私はASP.NETをSQL Serverで使用しています。 ChartJSを使用して自分のウェブサイトのチャートを作成しています。問題は、ChartJSがブラウザーでズームインまたはズームアウトすると結果が表示されることです。

なぜ誰かが知っていますか？AJAXを使用してデータベースから情報を取得し、動的なチャートを作成しています。

これは私のJavaScriptのである：

 $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "Graficas.asmx/obtenerGrafica", 
      data: '', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", // dataType is json format 
      success: function OnSuccess(response) { 
       items = response.d; 
       $.each(items, function (index, val) { 
        myChart.data.labels.push(val.Nombre); 
        myChart.data.datasets[0].data.push(val.Gastado); 
        nmbre.push(val.Nombre); 
        precio.push(val.Gastado); 
       }); 
      }, 
      error: function onError(error) { 
       console.log(error.d); 
      }, 
     }); 
     var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'horizontalBar', 
      data: { 
       labels: [], 
       datasets: [{ 
        label: ['Mensual'], 
        data: [], 
        backgroundColor: [ 
         'rgba(137, 107, 255, 0.3)' 
        ], 
        borderColor: [ 
         'rgba(137, 107, 255, 1)', 

        ], 
        borderWidth: 1 
       } 
       ] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     });   
    }); 

は、Uをありがとうございます。

Answer 1

グラフオブジェクトを初期化した後にajaxメソッドを呼び出してみてください。その後

var nomreArr= []; 
var gastadoArr= [];  

を成功機能 でそれらを移入してからも、あなたのHTMLは次のようにあるべきデータセット

nomreArr.push(val.Nombre); 
gastadoArr.push(val.Gastado); 

myChart.data.datasets[0].data = gastadoArr; 
myChart.data.datasets[0].labels= nomreArr; 
myChart.update(); 

に割り当てる：

$(document).ready(function() { 

    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'horizontalBar', 
     data: { 
      labels: [], 
      datasets: [{ 
       label: ['Mensual'], 
       data: [], 
       backgroundColor: [ 
        'rgba(137, 107, 255, 0.3)' 
       ], 
       borderColor: [ 
        'rgba(137, 107, 255, 1)', 

       ], 
       borderWidth: 1 
      } 
      ] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        } 
       }] 
      } 
     } 
    }); 
$.ajax({ 
     type: "POST", 
     url: "Graficas.asmx/obtenerGrafica", 
     data: '', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", // dataType is json format 
     success: function OnSuccess(response) { 
      items = response.d; 
      $.each(items, function (index, val) { 
       myChart.data.labels.push(val.Nombre); 
       myChart.data.datasets[0].data.push(val.Gastado); 
       nmbre.push(val.Nombre); 
       precio.push(val.Gastado); 
      }); 
     }, 
     error: function onError(error) { 
      console.log(error.d); 
     }, 
    });   
}); 

Answer 2

あなたのAJAX呼び出し前に2つの配列を追加します。 ：

<canvas id="myChart" width="400" height="150"></canvas>

Answer 3

私は彼と同じ正確な問題があった、と私はそれを修正することができた唯一の方法は、document.readyブロックを閉じる前にちょうど次を追加していた：

setTimeout(function() { 
    myChart.update(); 
},1000); 

それは理想的な未満だが、それだけでした一貫してチャートをレンダリングするためにできること - 1秒遅れて「更新」メソッドを呼び出します。