LightningChart JS 崩溃与 t.toFixed is not a function

Question

我正在使用 Arction 的 LightningChart JS 到 plot 条形图，并且在添加带有错误消息的矩形图形后它一直崩溃： 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进行转换。 请参阅https://stackoverflow.com/a/13676265/6198227以了解Number和parseFloat之间更详细的区别。

对于造型，看起来你会从使用浅色主题中受益。 使用ChartXY创建图表时，您可以指定theme选项。

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

您可以在我们的文档Themes