我想在示例 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;
uj5u.com熱心網友回復：
我通過以下方式解決了它：
rnow = dfrnow.to_dict('records')
def new_date(date):
return datetime.strptime(date, '%m/%d/%Y').strftime('%Y-%m-%dT00:00:00Z')
for i in range (len(rnow)):
rnow[i]['date'] = new_date(rnow[i]['date'])
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/429432.html
標籤：javascript Python 熊猫 日期 图表
上一篇：如何在Python中將格式日期從MM/DD/YYYY轉換為YYYY-MM-DDT00:00:00.000Z
下一篇：帶有日期的Pandas資料操作