我正在构建一个Django应用,它可以动态地向Chart JS提供数据。因为我试图将两个线序列(历史值和预测值)连接在一起,所以我试图让Chart JS理解NaN。代码是这样写的:
<script>
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: {{ new_dates|safe }},
datasets: [
{
data: {{ orig_val|safe }},
label: "Historical Sales",
borderColor: "#3e95cd",
fill: false
},
{
data: {{ preds|safe }},
label: "Predictions",
borderColor: "#22DD66",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'output chart'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
animation: {
duration: 2000,
},
}
});
</script>
这是控制台看到的内容:
<script>
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09'],
datasets: [
{
data: [71.0, 67.0, 84.0, 65.0, 78.0, 74.0, 73.0, 88.0, 86.0, 77.0, 94.0, 123.0, 71.0, 77.0, 57.0, 36.0, 57.0, 78.0, 89.0, 100.0, 120.0, 98.0, 121.0, 155.0, 99.0, 86.0, 162.0, 103.0, 102.0, 117.0, 114.0, 121.0, 127.0, 128.0, 141.0, 175.0, 124.0, 121.0, 139.0, nan, nan, nan, nan, nan, nan],
label: "Historical Sales",
borderColor: "#3e95cd",
fill: false,
spanGaps: true
},
{
data: [nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, 100.2935, 154.556, 122.833, 109.4725, 160.0235, 104.568],
label: "Predictions",
borderColor: "#22DD66",
fill: false,
spanGaps: true
}
]
},
options: {
title: {
display: true,
text: 'output chart'
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
},
animation: {
duration: 2000,
},
}
});
</script>
但是,我不断收到此错误:
未捕获的引用错误:未在(索引):40:282处定义Nan
这些“nan 's”是Python使用Numpy生成的,如下所示:y_hat = np.附加(y,np.零(6)+ np.非零).列表()
看起来Chart JS确实知道如何读取“null”值,但我不知道如何将Python转换为Chart JS实际可以读取的内容。
有什么主意吗?谢谢!
1条答案
按热度按时间biswetbf1#
我回答了我自己的问题。只需要使用.astype(str)将数组转换为字符串。所以如下所示:np.append(np.零(39)+ np.nan,数字数组).astype(字符串)