为什么chart.js图表 未在Safari中绘制数据(在Chrome中工作)

问题描述 投票:1回答:1

[我有一些图表是在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中遇到的错误。

弃用警告:提供的值不是公认的RFC2822或ISO格式。此刻的构建可以归结为js Date(),它在所有浏览器和版本之间都不可靠。不建议使用非RFC2822 / ISO日期格式,并将在即将发布的主要版本中将其删除。有关更多信息,请参考http://momentjs.com/guides/#/warnings/js-date/。>

我有一些在chart.js中创建的图表,它们在chrome中可以正常工作,但是当我在Safari中查看它们时,其中两个图表没有数据绘制,仅显示了图表的外壳。代码...

javascript chart.js
1个回答
1
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.