ChartJS / MomentJS - 无法删除弃用警告。图形未显示在 Firefox/opera 中

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 中工作的codepen图表示例：http : //codepen.io/kristjanrein/pen/wJrQLE 在 firefox/opera 中不显示

Answer 1

我在这里看到几个问题。

1) 既然你希望你的 X 轴是一个时间尺度，那么你应该把你的 X 数据值作为一个moment对象。您当前的实现是moment从日期字符串创建一个对象，然后将其格式化回字符串。执行此操作时，chart.js 会获取字符串并moment在构建图表时尝试在内部创建一个对象。

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

2）当您使用Chart.Scatter. 相反，您应该使用新样式 ( 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'
        }
      }]
    }
  }
});

你可以在这个分叉的 codepen 上看到它的作用。

要记住的另一件事是，由于您的数据跨越多年，您将在 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')),
    };
  });
};