轻量级图表未捕获错误:值为空

问题描述

轻量级图表版本:3.1.3

我在 Vue 项目中将您的图表用于加密货币交易应用程序 但无论我得到什么,下面的这个错误都是一个示例代码

没有重复或空数据。


import {createChart} from "lightweight-charts";
export default {
data() {
return {
                chartProperties: {
                  width: 700,height: 300,timeScale: {
                     timeVisible: true,secondsVisible: false
                },layout: {
                    //backgroundColor: '#262C49',//Dark Theme
                    //textColor: '#80859E',fontSize: 12,fontFamily: 'irsans,Calibri'
                }
            },chartData: [],candleSeries: null,}
}
mounted() {

let cdata = [
{
close: 22750.76
high: 22759.53
low: 22750.25
open: 22752.8
time: 1608635340
},....
];

this.chartElement = document.getElementById('chart');
this.chartProperties.width = this.chartElement.offsetWidth;
this.chart = createChart(this.chartElement,this.chartProperties);
this.candleSeries = this.chart.addCandlestickSeries();

this.candleSeries.setData(cdata);

实际行为:

图表是在没有烛台的情况下绘制的

enter image description here

和 Uncaught Error: Value is null 的重复错误

enter image description here

jsfiddle

解决方法

如果您收到此错误 99% 的可能性是您的数据源存在三个问题之一

  1. 部分数据为空
  2. 时间戳中的数据有重复
  3. 我的问题:数据应该按时间按 ASC 顺序排序,而不是按时间排序 说明
,

如果您使用的是 Object 结构,那么在向数组中添加新元素后您是不是忘记了逗号?

let cdata = [

{ 关闭:22750.76, 高:22759.53, 低:22750.25, 打开:22752.8, 时间:1608635340, },.... ]

因为没有逗号,它似乎是对象中的唯一元素,这是不正确的。