LightningChart JS 崩溃 t.toFixed 不是函数

Question

我正在使用 Arction 的 LightningChart JS 绘制条形图，但在添加带有错误消息的矩形图形后它一直崩溃：t.toFixed is not a function

正在使用的系列是一个矩形系列，我只想使用一个矩形系列，因为我需要将它们全部放在一个组中。

下面是我的代码

// Core react imports
import React, { useEffect, useCallback } from 'react'
// React bootstrap imports
import { Col } from "react-bootstrap"
// Chart imports
import {
    lightningChart,
    SolidFill,
    SolidLine,
    emptyTick,
    emptyLine,
    FontSettings,
    ColorHEX,
} from "@arction/lcjs"
import axios from "axios"
export default function Histogram() {
    const createChart = useCallback(
        () => {

            const chart = lightningChart().ChartXY({ containerId: "myplot" });
            chart
                .setTitle("RR Histogram")
                .setTitleFillStyle((solidFill) => solidFill.setColor(ColorHEX("#000")))
                .setTitleMarginTop(0)
                .setTitleMarginBottom(0)
                .setChartBackgroundFillStyle((solidFill) =>
                    solidFill.setColor(ColorHEX("#FFF"))
                )
                .setBackgroundFillStyle((solidFill) =>
                    solidFill.setColor(ColorHEX("#FFF"))
                )
                .setZoomingRectangleStrokeStyle(
                    new SolidLine({
                        fillStyle: new SolidFill({ color: ColorHEX("#000") }),
                    })
                )
                .setTitleFont(new FontSettings({ size: 20 }));
            // Configure X-axis of chart to be progressive and have nice interval.
            chart
                .getDefaultAxisX();
            // .setTickStyle(emptyTick)
            // .setNibStyle(emptyLine)
            // .setTitleFont(new FontSettings({ size: 12 }))
            // .setStrokeStyle(emptyLine);
            chart
                .getDefaultAxisY();
            // .setTickStyle(emptyTick)
            // .setNibStyle(emptyLine)
            // .setStrokeStyle(emptyLine);
            let rectSeries = chart
                .addRectangleSeries()
                .setDefaultStyle(figure => figure.setFillStyle(new SolidFill({
                    color: ColorHEX("#000")
                })));
            let rr_hist = {};
            axios
                .get("Api  url here")
                .then((res) => {
                    console.log(res)
                    rr_hist = res.data;
                })
                .catch((err) => console.log(err));
            setTimeout(() => {
                for (let point in rr_hist) {
                    let insert_Point = {
                        height: rr_hist[point],
                        y: 0,
                        x: point,
                        width: 1
                    }
                    let bar = rectSeries.add(insert_Point);
                    bar.setDimensions(insert_Point);
                    bar.setFillStyle(new SolidFill({ color: ColorHEX("#000") }));
                    bar.setStrokeStyle(new SolidLine({
                        fillStyle: new SolidFill({ color: ColorHEX("#000") }),
                    }))
                }
                console.log(rr_hist)
            }, 2000)
        },
        [],
    )
    useEffect(() => {
        createChart()
    }, [createChart])
    return (
        <Col xs={12} style={{ height: "100%", width: "100%" }}>
            <div id="myplot" style={{ height: "100%", width: "100%" }}></div>
        </Col>
    )
}

另外请告诉我如何改进样式？

Answer 1

最可能的崩溃原因是新矩形图形的 height 或 x 字段不是数字。 LightningChart JS 不对输入值进行类型转换。

因此，在向矩形系列中添加新矩形时，请确保自己进行从字符串到数字的类型转换。

let insert_Point = {
    height: Number(rr_hist[point]),
    y: 0,
    x: Number(point),
    width: 1
}
let bar = rectSeries.add(insert_Point);

您可以使用 parseFloat 或 parseInt 代替 Number 进行转换，具体取决于您使用的数据类型。有关 Number 和 parseFloat 之间更详细的差异，请参阅的答案。

对于样式，使用浅色主题似乎会有所帮助。使用 ChartXY 创建图表时，您可以指定 theme 选项。

const chart = lightningChart().ChartXY({
    theme: Themes.light
})

您可以在我们的文档中查看可用的主题Themes

LightningChart JS 崩溃 t.toFixed 不是函数

LightningChart JS crashes with t.toFixed is not a function

javascript

lightningchart