条形图在更改年份时不显示

问题描述 投票:0回答:1

我想按月绘制取决于年份的数据图表条(当我更改年图表条更改值时,并且我使用此代码,

 <script>
 function drawMonthwiseChart(incoming, outgoing)
 {
    var ctxLabel = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aôut', 
       'Septembre', 'Octobre', 'Novembre', 'Décembre'];
    var ctxData1 = incoming;
    console.log(ctxData1);
    var ctxData2 = outgoing;
    console.log(ctxData2);
    var ctxColor1 = '#5556fd';
    var ctxColor2 = '#4bdedb';
    // Bar chart
    var ctx = document.getElementById('chartBar3').getContext('2d');
    new Chart(ctx, {
type: 'bar',
data: {
  labels: ctxLabel,
  datasets: [{
    data: ctxData1,
    backgroundColor: ctxColor1
  }, {
    data: ctxData2,
    backgroundColor: ctxColor2
  }]
},
options: {
  maintainAspectRatio: false,
  responsive: true,
  legend: {
    display: false,
    labels: {
      display: false
    }
  },
  scales: {
    yAxes: [{
      gridLines: {
        color: '#e5e9f2'
      },
      ticks: {
        beginAtZero:true,
        fontSize: 10,
        fontColor: '#535d65',
        max: 60000
      }
    }],
    xAxes: [{
      gridLines: {
        display: false
      },
      barPercentage: 0.6,
      ticks: {
        beginAtZero:true,
        fontSize: 11,
        fontColor: '#535d65'
      }
    }]
  }
 }
 });
 }
 </script>

此代码,当更改年份时

  <script>
  var incoming;
  var outgoing;
  $('#selectedyear').change( function (e) {
   var year = $(this).val();
   $.post("<?=base_url().'Hpg_statistics/get_incoming_data_per_month';?>", 
   {selectedyear:$('#selectedyear').val()}, function(response){
    incoming = response;
    console.log(year);
$.post("<?=base_url().'Hpg_statistics/get_outgoing_data_per_month';?>", {selectedyear:$('#selectedyear').val()}, function(response){    
    outgoing = response;
    drawMonthwiseChart(incoming, outgoing);
}); 
}); 

});
</script> 

当我更改返回的年份时,没有在我的图表栏中绘制数据,结果是这样的:

enter image description here

但是我我想要这样的结果:enter image description here

hwo可以帮助我。

javascript charts
1个回答
0
投票

这只是一个猜测,但是可以肯定的是,将它们放入console.log时,传入和响应不为空吗?如果是这样,则可以尝试以下操作:myBarChart.update();

© www.soinside.com 2019 - 2024. All rights reserved.