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

Mil*_*lad 5 javascript candlestick-chart lightweight-charts

轻量级图表版本: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);

Run Code Online (Sandbox Code Playgroud)

实际行为:

图表是没有烛台绘制的

在此输入图像描述

和重复错误 Uncaught Error: Value is null

在此输入图像描述

jsfiddle

Mil*_*lad 18

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

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