2017-08-11 66 views
0

我開發了一個網頁來顯示任何類型的基於時間的數據,並且我想要顯示它。這裏是我的腳本的重要組成部分:chart.js將不會在IE中顯示圖表

function updateData(chart, label, data) { 
    chart.data.labels = label; 
    chart.data.datasets.forEach(function (dataset) { 
     dataset.data = data; 
    }); 
    chart.update(); 
} 

$(".lineChart").each(function() { 
     var current = $(this).attr("capteur") 
     var prop = $(this).attr("prop") 
     var color = null; 
     var type = $(this).attr("type") 

     switch ($(this).attr("type")) { 
      case "Gaz": { 
       color = getColor(1); 
       break; 
      } 
      case "Electricite": { 
       color = getColor(2); 
       break; 
      } 
      case "Eau": { 
       color = getColor(3); 
       break; 
      } 
     } 

     var datasets = []; 
     var labels = [] 

     if (datas[current][prop].lineChart.values) { 
      labels.push(datas[current][prop].lineChart.dates) 
      datasets.push({ 
       label: datas[current][prop].lineChart.nom, 
       fill: false, 
       borderColor: color, 
       backgroundColor: color, 
       pointRadius: 2, 
       data: datas[current][prop].lineChart.values 
      }); 
     } 

     datas[current][prop].lineChart.chart = new Chart($(this).get(), { 
      type: 'line', 
      data: { 
       labels: labels, 
       datasets: datasets 
      }, 
      options: { 
       scales: { 
        xAxes: [{ 
         type: 'time', 
         unit: 'day', 
         unitStepSize: 1, 
         time: { 
          displayFormats: { 
           'second': 'mm:ss', 
           'minute': 'HH:mm', 
           'hour': 'DD HH:mm', 
           'day': 'MMM DD', 
           'week': 'MMM DD', 
           'month': 'MMM DD', 
           'quarter': 'MMM DD', 
           'year': 'YYYY MMM', 
          } 
         }, 
         display: true, 
         scaleLabel: { 
          display: false, 
          labelString: datas[current][prop].lineChart.nom, 

         } 

        }], 
        yAxes: [{ 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: datas[current][prop].lineChart.unite 
         } 
        }] 
       }, 
       tooltips: { 
        callbacks: { 
         title: function (tooltipItem, data) { 
          var maDate = new Date(data.labels[tooltipItem[0].index]); 
          return moment(data.labels[tooltipItem[0].index]).format('[Date ] DD/MM/YYYY HH:mm:ss '); 
         }, 
         label: function (tooltipItem, data) { 
          var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
          var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+")); 
          return 'Valeur ' + amount + datas[current][prop].lineChart.unite; 
         }, 
         //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; } 
        } 
       }, 
       title: { 
        display: true, 
        text: 'Consommation ' + type + ' instantanée' 
       } 
      } 
     }); 
    }) 

圖表將顯示每個導航正常,但在IE上,你可以看到有:

On Chrome

On IE

我預計會出現一些錯誤,但控制檯上沒有任何信息調試器讓我顯示數據都被網頁瀏覽器收到。

那麼我的代碼看起來不錯?

+0

http://www.chartjs.org/docs/latest/developers/#browser-支持。你在哪個版本的IE中進行測試? – Surely

+0

我使用IE9和邊緣版本。但我不認爲它是因爲畫布,因爲我能夠獲得軸,它只是關於線圖 –

+1

可能它與此問題有關:https://github.com/chartjs/Chart.js/issues/4294。在最後的帖子中有一個解決方法,你可以試試。 – Surely

回答

1

這是肯定的說,要解決這個問題,你必須之前初始化圖表,添加以下內容:

if (Number.MAX_SAFE_INTEGER === undefined) { 
    Number.MAX_SAFE_INTEGER = 9007199254740991; 
} 
if (Number.MIN_SAFE_INTEGER === undefined) { 
    Number.MIN_SAFE_INTEGER = -9007199254740991; 
}