javascript - 为什么 chart.js 图表不在 Safari 中绘制数据(适用于 Chrome)

Question

我在 chart.js 中创建了几个图表，它们在 chrome 中工作正常，但是当我在 Safari 中查看它们时，其中两个图表没有绘制数据，只显示了图表的外壳。

这些代码完全相同。我正在拉入 csv 文件。我能看到的唯一区别是不起作用的 CSV 包含数据中的月份和年份。我怎样才能修复代码，使其显示在 Safari 和 Chrome 中？是我的日期设置吗？我也在 Chrome 中收到这条奇怪的消息(见下文，看起来也与日期问题有关)。

这种类型的数据工作正常:

"1980","2.4"

"1981","2.6"

"1982","2.7"

此数据不:

"May 2016","6.9"

"June 2016","6.8"

"July 2016","7.0"

这是我的代码:

window.addEventListener('load', setup);

      async function setup() {
        var ctx = document.getElementById('myChart').getContext('2d');
        var dollar = await getData();
        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: dollar.years,
            datasets: [
              {label: 'Unemployment rate',
                data: dollar.vals,
                borderColor: 'rgb(153,222,101)',
                backgroundColor: 'rgb(153,222,101, 0.2)',
                pointRadius: 0,
                borderWidth: 6,
                pointHitRadius: 10,
                }]
              },

options: {
layout: {
padding: {
  left: 0,
  right: 15,
  top: 0,
  bottom: 0}
  },
responsive: true,
title: {
display: false
},

legend: {
display: false
},

scales: {
yAxes: [{
ticks: {
min: 3,
max: 8,
stepSize: 1
}
}],

xAxes: [{
type: "time",
time: {
unit: "year",
tooltipFormat: "YYYY"
},

gridLines: {
display: true,
drawOnChartArea: false,
},

ticks: {
display: true,
maxTicksLimit: 5,
maxRotation: 0,
minRotation: 0,
padding: 1
},
}],
}
}
        });
        }

这是我在 Chrome 中遇到的错误。

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/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.

Answer 1

问题在于解析日期字符串。 Chart js 对日期字符串使用时刻适配器，这种类型(“2016 年 5 月”)的格式在某些浏览器中可能不容易解析，要查看可以使用哪种格式，请检查 https://momentjs.com/docs/#/parsing/string-formats/

下面的代码应该适用于第二组数据

window.addEventListener('load', setup);
var formatDate = (dateString) => {
  return moment(dateString, "MMM YYYY").toDate()
}

async function setup() {
  var ctx = document.getElementById('myChart').getContext('2d');
  var dollar = await getData();
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: dollar.years.map(year => formatDate(year)),
      datasets: [{
        label: 'Unemployment rate',
        data: dollar.vals,
        borderColor: 'rgb(153,222,101)',
        backgroundColor: 'rgb(153,222,101, 0.2)',
        pointRadius: 0,
        borderWidth: 6,
        pointHitRadius: 10,
      }]
    },

    options: {
      layout: {
        padding: {
          left: 0,
          right: 15,
          top: 0,
          bottom: 0
        }
      },
      responsive: true,
      title: {
        display: false
      },

      legend: {
        display: false
      },

      scales: {
        yAxes: [{
          ticks: {
            min: 3,
            max: 8,
            stepSize: 1
          }
        }],

        xAxes: [{
          type: "time",
          time: {
            unit: "year",
            tooltipFormat: "YYYY"
          },

          gridLines: {
            display: true,
            drawOnChartArea: false,
          },

          ticks: {
            display: true,
            maxTicksLimit: 5,
            maxRotation: 0,
            minRotation: 0,
            padding: 1
          },
        }],
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>