我有一个必须创建图形的javascript函数:
<script>
window.setGraph = (lab, ser) => {
console.log(document.getElementById("weather-chart"));
console.log(lab);
console.log(ser);
var chart = new Chartist.Line('#weather-chart', {
labels: lab,
series: ser
});
console.log("done");
return true;
}
</script>
这个函数由我的一个blazor组件调用:
protected override async Task OnInitAsync()
{
some-data-a = await RetrieveSomeData();
some-data-b = await RetrieveSomeOtherData();
JSRuntime.Current.InvokeAsync<bool>("setGraph", some-data-a, some-data-b);
}
一切都被执行,我的console.log
被称为。但似乎在这一刻我的元素#weather-chart
无法找到,因为我得到了这个:
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at Object.c.createSvg (chartist.min.js:8)
at f.d [as createChart] (chartist.min.js:8)
at f.h (chartist.min.js:8)
和我的console.log(document ....)返回null。
如果我转到此页面,我就会出现错误,如果在收到此错误后我在Chrome开发人员工具中执行类似window.setGraph([1,2,3], [[1,2,3]])
的操作,则所有内容都会正确初始化。
那我做错了什么?为什么图表主义者似乎无法找到该元素?
看来blazor的数据绑定需要一些时间才能显示html。所以基本上在我设置了_items之后,它正在改变模板,但是在此之后线路的速度还不够快(不知道为什么,因为有等待)。