【发布时间】:2022-02-15 02:49:10
【问题描述】:
我想在示例 HTML 图表中添加我自己的数据。样本数据的javascript代码为:
var data = [];
var visits = 10;
for (var i = 1; i < 50000; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({
date: new Date(2018, 0, i),
value: visits
});
}
chart.data = data
我用console.log(data) 运行了样本数据的输出,发现样本数据是以下字典列表:
[{"date":"2018-11-10T05:00:00.000Z","value":-459},
{"date":"2018-11-11T05:00:00.000Z","value":-459},
{"date":"2018-11-12T05:00:00.000Z","value":-464},
...
{"date":"2020-11-22T05:00:00.000Z","value":-493}]
我使用pandas 创建了一个字典列表作为我自己的数据。我把自己的数据改成与上面示例数据列表的格式匹配,下面的列表是我自己的数据:
rnow =
[{'date': '01/02/2020', 'value': 13},
{'date': '01/03/2020', 'value': 2},
{'date': '01/06/2020', 'value': 5},
...
{'date': '01/07/2020', 'value': 6}]
我意识到日期格式与示例数据不同。我使用以下代码将日期格式更改为 yyyy-mm-dd。
dfrnow['date'] = pd.to_datetime(dfrnow.date)
rnow = dfrnow.to_dict('records')
现在我的数据显示为:
rnow =
[{'date': Timestamp('2020-01-02 00:00:00'), 'value': 13},
{'date': Timestamp('2020-01-03 00:00:00'), 'value': 2},
{'date': Timestamp('2020-01-06 00:00:00'), 'value': 5},
...
{'date': Timestamp('2020-01-07 00:00:00'), 'value': 6}]
当我用自己的数据替换示例数据时,图表不显示任何数据。那是因为它在我的列表中显示了这个“时间戳”,我应该如何删除它?或者还有其他更好的方法可以用来转换我的日期吗?
(以下代码是这个模板图表的所有js代码,我把它们列在这里,以防遗漏。)
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
var data = [];
var visits = 10;
for (var i = 1; i < 50000; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({
date: new Date(2018, 0, i),
value: visits
});
}
chart.data = {{rnow}};
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.minZoomCount = 5;
dateAxis.groupData = true;
dateAxis.groupCount = 500;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;
var selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
selector.container = document.getElementById("selectordiv");
selector.axis = dateAxis;
【问题讨论】:
-
'01/02/2020'不是有效的 ISO 日期,因此聊天包可能不支持它们。考虑不转换日期?或使用YYYY-MM-DD -
是的,我认为您是对的,但是在我将日期更改为 yyyy-mm-dd 之后,它仍然不起作用。那是因为我还需要添加时间数据吗?
-
如果样本数据使用
"2018-11-10T05:00:00.000Z",那么它是否可以与Timestamp('2020-01-02 00:00:00')一起工作,将取决于使用该参数调用的Timestamp函数实际返回的内容——那必须是@ 987654334@ 格式然后再一次(或您的图书馆理解的其他格式。) -
非常感谢。我应该在哪里更改我的图书馆可以理解的格式?我是 Python 和 js 的新手。请多多指教
-
或者如何将我的
2020-01-02 00:00:00更改为2020-01-02T05:00:00.000Z
标签: javascript python pandas date charts