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上,你可以看到有:
我預計會出現一些錯誤,但控制檯上沒有任何信息調試器讓我顯示數據都被網頁瀏覽器收到。
那麼我的代碼看起來不錯?
http://www.chartjs.org/docs/latest/developers/#browser-支持。你在哪個版本的IE中進行測試? – Surely
我使用IE9和邊緣版本。但我不認爲它是因爲畫布,因爲我能夠獲得軸,它只是關於線圖 –
可能它與此問題有關:https://github.com/chartjs/Chart.js/issues/4294。在最後的帖子中有一個解決方法,你可以試試。 – Surely