ChartJS / MomentJS - 无法删除弃用警告.图表未显示在火狐/歌剧中

Question

所以浏览器抛出

关于不正确使用momentJS的警告。

Deprecation warning: value provided is not in a recognized ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 12.30, _f: false, _strict: undefined, _locale: [object Object]
Error 

所以我看了我的代码

data: {
labels: ['01.01', '02.01', '03.01', '04.01', '05.01', '06.01', '07.01', '08.01', '09.01', '10.01', '11.01', '12.01'],
datasets: createChatterData(data, this)
},

并阅读在处理非 iso 字符串时我应该提供一种格式。

labels: [moment('01.01', 'MM.DD'), moment('02.01', 'MM.DD'), ...];

好的，删除了第一个弃用。

但我的数据集数据也包含日期

dataset.data.pushObject({
x: moment(datum).format('MM.DD'),
y: parseInt(moment(datum).format('YYYY'))
});

所以我尝试了不同的变体(预先修改的模棱两可的日期时间)

x: moment(date, 'YYYY.MM.DD').format('MM.DD') 

和

x: moment(date, 'MM.DD')

但是我的图表不再正确映射。

在 chrome 中工作的编码笔图示例：http://codepen.io/kristjanrein/pen/wJrQLE 不显示在火狐/歌剧中

Answer 1

我在这里看到了几个问题。

1)由于您希望X轴成为时间刻度，因此应将X数据值保留为moment对象。 您当前的实现是从日期字符串创建moment对象，然后将其格式化回字符串。 执行此操作时，chart.js 将获取字符串，并在生成图表时尝试在内部创建moment对象。

因此，最好将数据保留为Date或Moment对象，并使用时间刻度配置属性来确定数据在图表上的显示方式。 这样可以防止 chart.js 必须构造moment对象并猜测字符串格式。

2)当您使用Chart.Scatter时，您正在使用2.0之前的方式创建图表。 相反，您应该使用新样式 (new Chart()) 并传入一个type属性。

这是您的代码的修改版本，它不会产生浏览器警告，并且可以在Chrome和Firefox中工作(我没有在Opera中测试过)。

var getData = function() {
var dummyDataset = [
'2007-11-09T00:00:00.000Z',
'2006-08-04T00:00:00.000Z',
'2006-08-06T00:00:00.000Z',
'2008-01-10T00:00:00.000Z'
];
return dummyDataset.map(function(datum) {
var myMoment = moment(datum);
return {
x: myMoment,
y: parseInt(myMoment.format('YYYY')),
};
});
};
var ctx = document.getElementById("chart1").getContext("2d");
var myScatter = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "My First dataset",
borderColor: 'rgb(255, 99, 132)',
fill: false,
pointRadius: 4,
pointHoverRadius: 8,
showLine: false,
data: getData()
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Random Data'
},
legend: {
display: true,
labels: {
fontSize: 10,
boxWidth: 20
}
},
elements: {
point: {
pointStyle: 'rect'
}
},
hover: {
mode: 'nearest'
},
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Months'
},
time: {
unit: 'month',
displayFormats: {
month: 'MM'
},
}
}],
yAxes: [ {
type: 'linear',
ticks: {
min: 2005,
max: 2015,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Year'
}
}]
}
}
});

你可以在这个分叉的代码笔中看到它的实际效果。

要记住的另一件事是，由于您的数据跨越多年，因此您将在 X 轴上看到重复的月份。 请记住，时间刻度用于绘制日期，因此即使您只显示月份，也不会在同一位置绘制具有相同月份但具有不同年份的数据点。

如果您实际上只想在 X 轴上显示月份字符串/数字值，那么您根本不应该使用time刻度，而应使用linear刻度。 然后，当您构建数据值时，您将从数据中提取月份(与您已经为 Y 值所做的方式相同)。

var getData = function() {
var dummyDataset = [
'2007-11-09T00:00:00.000Z',
'2006-08-04T00:00:00.000Z',
'2006-08-06T00:00:00.000Z',
'2008-01-10T00:00:00.000Z'
];
return dummyDataset.map(function(datum) {
var myMoment = moment(datum);
return {
x: parseInt(myMoment.format('MM')),
y: parseInt(myMoment.format('YYYY')),
};
});
};

Answer 2

所以除了乔丹的回答 我更改了标签和 x 轴

['01.01', '02.01', ...] to [1,2,...]

和

从类型：'time' to type: 'linear'

并且不仅要按月绘制地图，还要按天绘制地图。我必须制作日期对象来纠正浮点数。05.20 至 5.66

const date = datum.key;
const day = parseInt(moment(date).format('DD')) / 30 * 100;
const fullDate = parseFloat(moment(date).format('MM') + '.' + Math.round(day))
// 05.10 would be 5.3 (10 of 30 is 33%)
{
x: fullDate, 
y: parseInt(moment(date).format('YYYY')) 
date: date, // for tooltip
count: count  // for tooltip
}

我还必须更正我的工具提示

callbacks: {
title: function([tooltipItem], data) {
const tooltipInfo = getTooltip(tooltipItem, data.datasets);
return tooltipInfo.date;
},
label: function(tooltipItem, data) {
const tooltipInfo = getTooltip(tooltipItem, data.datasets);
return i18n.t('chart.count') + ': ' + tooltipInfo.count;
},
}

对应的工具提示数据集

function getTooltip(tooltipItem, datasets) {
return datasets[tooltipItem.datasetIndex].data.find(datum => {
return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel;
});
}