SciChart JavaScript Charts圖表庫(kù)能幫助用戶來(lái)探索JS應(yīng)用程序的最終解決方案，使用WebGL創(chuàng)建動(dòng)態(tài)、高速的圖表和圖形，非常適合實(shí)時(shí)處理復(fù)雜的數(shù)據(jù)可視化，使用其強(qiáng)大而靈活的JS圖表工具可以提升JavaScript項(xiàng)目。

通過(guò)在1000多個(gè)輸出類(lèi)型上使用上萬(wàn)個(gè)屬性，SciChart JavaScript Charts構(gòu)建了處理科學(xué)、醫(yī)療、金融、航天航空、賽車(chē)運(yùn)動(dòng)、石油和天然氣中苛刻的JavaScript圖表和繪圖要求。

在本文中我們將在20分鐘內(nèi)用React和SciChart.js創(chuàng)建一個(gè)完全交互式的動(dòng)態(tài)儀表板，幾乎完全使用AI進(jìn)行編碼。儀表板有五種不同類(lèi)型的圖表：React折線圖、React散點(diǎn)圖、React堆疊柱圖和React餅圖，以網(wǎng)格布局排列。我們將介紹如何將SciChart.js集成到React儀表板中，使用SciChart-react應(yīng)用自定義主題，并定位圖表以保持一致的布局。在本教程結(jié)束時(shí)，您將擁有一個(gè)功能齊全的React儀表板，可以自定義用于任何領(lǐng)域的數(shù)據(jù)可視化。

引言

數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序的一個(gè)關(guān)鍵方面，它使用戶能夠一目了然地理解復(fù)雜的數(shù)據(jù)。隨著SciChart.js等強(qiáng)大的React圖表庫(kù)的興起，開(kāi)發(fā)人員現(xiàn)在可以輕松創(chuàng)建令人驚嘆的高性能可視化。當(dāng)與React（一個(gè)流行的JavaScript庫(kù)，用于構(gòu)建帶有交互式儀表板的用戶界面）結(jié)合使用時(shí)，可能性是很大的。

在這篇博客中，我們將探索如何構(gòu)建一個(gè)動(dòng)態(tài)儀表板，展示五種不同的圖表類(lèi)型，所有這些都無(wú)縫集成到一個(gè)視圖中。儀表板的設(shè)計(jì)是交互式的，有工具提示、圖例、縮放和平移行為，讓您可以在飛行模式中檢查數(shù)據(jù)。

本文將通過(guò)使用Deepseek R1 來(lái)展示生成式AI工具在創(chuàng)建React儀表板布局中的強(qiáng)大功能，并展示使用的提示以及需要進(jìn)行哪些更改才能使儀表板工作。

入門(mén)指南

創(chuàng)建輸入提示符

我們從使用Deepseek開(kāi)始教程，它在編碼基準(zhǔn)測(cè)試中得分很高，并且運(yùn)行成本比較低。

從第一個(gè)提示符開(kāi)始。

Deepseek直接處理輸出，正確地建議使用“npm install scchart scchart -react”。然后，它提供JSX輸出以包含在應(yīng)用程序中。

DeepSeek的第一個(gè)輸出提供了良好的代碼，但略有錯(cuò)誤，我們稍后會(huì)對(duì)它進(jìn)行修改和更正，這是儀表板的初稿。JSX全稱：

dashboard.jsx version #1 with errors

import React from "react";
import {
SciChartSurface,
NumericAxis,
FastLineRenderableSeries,
XyDataSeries,
EllipsePointMarker,
FastScatterRenderableSeries,
StackedColumnCollection,
StackedColumnRenderableSeries,
FastMountainRenderableSeries,
PieChart,
PieSegment,
SciChartJsNavyTheme,
} from "scichart";
import { SciChartReact } from "scichart-react";

// Initialize the line chart
const initLineChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 4, 6, 8, 10],
}),
});
sciChartSurface.renderableSeries.add(lineSeries);
return sciChartSurface;
};

// Initialize the scatter chart
const initScatterChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const scatterSeries = new FastScatterRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [3, 5, 7, 9, 11],
}),
pointMarker: new EllipsePointMarker(wasmContext, { width: 10, height: 10 }),
});
sciChartSurface.renderableSeries.add(scatterSeries);
return sciChartSurface;
};

// Initialize the stacked column chart
const initStackedColumnChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const stackedColumnCollection = new StackedColumnCollection(wasmContext);
const series1 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 3, 4, 5, 6],
}),
});
const series2 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [1, 2, 3, 4, 5],
}),
});
stackedColumnCollection.add(series1, series2);
sciChartSurface.renderableSeries.add(stackedColumnCollection);
return sciChartSurface;
};

// Initialize the mountain chart
const initMountainChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [5, 4, 3, 2, 1],
}),
});
sciChartSurface.renderableSeries.add(mountainSeries);
return sciChartSurface;
};

// Initialize the pie chart
const initPieChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const pieChart = new PieChart(wasmContext, {
segments: [
new PieSegment({ value: 30, title: "Segment 1" }),
new PieSegment({ value: 20, title: "Segment 2" }),
new PieSegment({ value: 50, title: "Segment 3" }),
],
});
sciChartSurface.renderableSeries.add(pieChart);
return sciChartSurface;
};

// Dashboard component
const Dashboard = () => {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{/* First row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact initChart={initLineChart}
style={{ width: "100%", height: "400px" }} />
</div>
<div style={{ flex: 1 }}>
<SciChartReact initChart={initScatterChart}
style={{ width: "100%", height: "400px" }} />
</div>
</div>

{/* Second row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact initChart={initStackedColumnChart}
style={{ width: "100%", height: "400px" }} />
</div>
<div style={{ flex: 1 }}>
<SciChartReact initChart={initMountainChart}
style={{ width: "100%", height: "400px" }} />
</div>
<div style={{ flex: 1 }}>
<SciChartReact initChart={initPieChart}
style={{ width: "100%", height: "400px" }} />
</div>
</div>
</div>
);
};

export default Dashboard;

在CodeSandbox中創(chuàng)建項(xiàng)目

讓我們將其導(dǎo)出到一個(gè)IDE中，本教程我們將使用codesandbox，它提供了一個(gè)現(xiàn)成的瀏覽器IDE，具有完整的npm、 JavaScript和react支持。

在codesandbox的主頁(yè)上，點(diǎn)擊“Create”創(chuàng)建一個(gè)新的sandbox。

選擇React（TS）作為模板，這將創(chuàng)建一個(gè)新的react項(xiàng)目，支持npm和TypeScript或JavaScript。

在依賴項(xiàng)部分，添加scichart和scichart-react，這相當(dāng)于在IDE中使用npm安裝scichart scichart-react，Package. json應(yīng)該更新如下：

接下來(lái)，創(chuàng)建一個(gè)名為dashboard.jsx的文件，粘貼上述提示符輸出的代碼。注意代碼是不正確的，因?yàn)锳I還不完美，但我們會(huì)做一些小的改變來(lái)編譯它。

現(xiàn)在，修改默認(rèn)的App.tsx來(lái)包含一個(gè)Dashboard組件：

import "./styles.css";
import Dashboard from "./dashboard";

export default function App() {
return (
<div className="App">
<Dashboard />
</div>
);
}

在下一節(jié)中，我們將處理這些錯(cuò)誤，來(lái)獲得一個(gè)正常工作的React Dashboard。

讓儀表板正常工作

開(kāi)始處理這些錯(cuò)誤。

Error #1: 檢查類(lèi)型正確

ChatGPT或Deepseek等人工智能經(jīng)常在語(yǔ)法上犯細(xì)微的錯(cuò)誤，這是因?yàn)樗麄兘邮苓^(guò)整個(gè)互聯(lián)網(wǎng)的培訓(xùn)，但可能對(duì)像SciChart這樣的特定庫(kù)沒(méi)有具體的了解。

例如，在dashboardjsx中，F(xiàn)astScatterRenderableSeries是不正確的——這應(yīng)該是XyScatterRenderableSeries。檢查其他導(dǎo)入不良的類(lèi)型或類(lèi)型錯(cuò)誤，Codesandbox將指出語(yǔ)法錯(cuò)誤，并對(duì)在SciChart庫(kù)中找到的類(lèi)型信息進(jìn)行自動(dòng)補(bǔ)全（智能感知）。

Error #2：無(wú)法加載圖表WebAssembly模塊

Could not load SciChart WebAssembly module. Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

發(fā)生此錯(cuò)誤是因?yàn)槟枰虬黽asm和data文件或從CDN加載它們。

在Dashboard react組件的開(kāi)頭添加一個(gè)對(duì)SciChartSurface.loadWasmFromCDN()的調(diào)用。

// Dashboard component
const Dashboard = () => {

SciChartSurface.loadWasmFromCDN(); // Add this call
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{/* First row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
...

Error #3：_scichart.PieChart不是一個(gè)構(gòu)造器

我們可以從SciChart JavaScript Pie Chart演示中找到創(chuàng)建餅圖的真正語(yǔ)法。

這是正確的代碼。

const initPieChart = async (rootElement) => {
const sciChartSurface = await SciChartPieSurface.create(rootElement, {
theme: new SciChartJsNavyTheme(),
});
const pieChartData = [
{ value: 40, text: "Segment 1" },
{ value: 30, text: "Segment 2" },
{ value: 20, text: "Segment 3" },
{ value: 10, text: "Segment 4" },
];

pieChartData.forEach((segment) =>
sciChartSurface.pieSegments.add(new PieSegment(segment))
);
return sciChartSurface;
};

Error #4：“initChart”函數(shù)應(yīng)該解析為具有“sciChartSurface”屬性的對(duì)象（{sciChartSurface}）

這個(gè)錯(cuò)誤與使用scichart-react有關(guān)，下面是正確的代碼：

// Initialize the line chart
const initLineChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
theme: new SciChartJsNavyTheme(),
});
// ...
return { sciChartSurface }; // This is the correct return value
};

完整的React儀表板

現(xiàn)在您應(yīng)該有一個(gè)工作的指示板，它看起來(lái)有點(diǎn)乏味，但我們將在下一節(jié)中對(duì)其進(jìn)行修改。

下面是dashboard.jsx的工作代碼：

dashboard.jsx version #2 working dashboard

import React from "react";
import {
SciChartSurface,
NumericAxis,
FastLineRenderableSeries,
XyDataSeries,
EllipsePointMarker,
XyScatterRenderableSeries,
StackedColumnCollection,
StackedColumnRenderableSeries,
FastMountainRenderableSeries,
SciChartPieSurface,
PieSegment,
SciChartJsNavyTheme,
} from "scichart";
import { SciChartReact } from "scichart-react";

// Initialize the line chart
const initLineChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 4, 6, 8, 10],
}),
});
sciChartSurface.renderableSeries.add(lineSeries);
return { sciChartSurface };
};

// Initialize the scatter chart
const initScatterChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [3, 5, 7, 9, 11],
}),
pointMarker: new EllipsePointMarker(wasmContext, { width: 10, height: 10 }),
});
sciChartSurface.renderableSeries.add(scatterSeries);
return { sciChartSurface };
};

// Initialize the stacked column chart
const initStackedColumnChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const stackedColumnCollection = new StackedColumnCollection(wasmContext);
const series1 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 3, 4, 5, 6],
}),
});
const series2 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [1, 2, 3, 4, 5],
}),
});
stackedColumnCollection.add(series1, series2);
sciChartSurface.renderableSeries.add(stackedColumnCollection);
return { sciChartSurface };
};

// Initialize the mountain chart
const initMountainChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [5, 4, 3, 2, 1],
}),
});
sciChartSurface.renderableSeries.add(mountainSeries);
return { sciChartSurface };
};

// Initialize the pie chart
const initPieChart = async (rootElement) => {
const sciChartSurface = await SciChartPieSurface.create(rootElement, {
theme: new SciChartJsNavyTheme(),
});
const pieChartData = [
{ value: 40, text: "Segment 1" },
{ value: 30, text: "Segment 2" },
{ value: 20, text: "Segment 3" },
{ value: 10, text: "Segment 4" },
];

pieChartData.forEach((segment) =>
sciChartSurface.pieSegments.add(new PieSegment(segment))
);
return { sciChartSurface };
};

// Dashboard component
const Dashboard = () => {
SciChartSurface.loadWasmFromCDN();
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{/* First row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initLineChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initScatterChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>

{/* Second row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initStackedColumnChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initMountainChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initPieChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>
</div>
);
};

export default Dashboard;

向React儀表板添加樣式

SciChart主題非常強(qiáng)大，SciChartJsNavyTheme包含一組預(yù)定義的系列顏色，這些顏色與圖表的背景顏色看起來(lái)很好。然而，對(duì)于某些系列，當(dāng)不設(shè)置系列顏色時(shí)，您將獲得缺乏想象力的灰色。

讓我們?cè)俅卫肈eepseek來(lái)修改代碼，使用一個(gè)新的提示傳遞工作代碼并請(qǐng)求更改。

因?yàn)槲覀円呀?jīng)給了AI工作代碼，所以它應(yīng)該直接修改代碼而不會(huì)出現(xiàn)錯(cuò)誤。下面是帶有樣式和顏色的輸出dashboard.jsx。

dashboard.jsx version #3 with styles

import React from "react";
import {
SciChartSurface,
NumericAxis,
FastLineRenderableSeries,
XyDataSeries,
EllipsePointMarker,
XyScatterRenderableSeries,
StackedColumnCollection,
StackedColumnRenderableSeries,
FastMountainRenderableSeries,
SciChartPieSurface,
PieSegment,
SciChartJsNavyTheme,
} from "scichart";
import { SciChartReact } from "scichart-react";

// Define pastel colors
const strokeColors = ["#274b92", "#47bde6", "#ae418d", "#e97064", "#68bcae"];
const fillColors = ["#274b9288", "#47bde688", "#ae418d88", "#e9706488", "#68bcae88"];

// Initialize the line chart
const initLineChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 4, 6, 8, 10],
}),
stroke: strokeColors[0], // Apply stroke color
});
sciChartSurface.renderableSeries.add(lineSeries);
return { sciChartSurface };
};

// Initialize the scatter chart
const initScatterChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [3, 5, 7, 9, 11],
}),
pointMarker: new EllipsePointMarker(wasmContext, {
width: 10,
height: 10,
stroke: strokeColors[1], // Apply stroke color
fill: fillColors[1], // Apply fill color
}),
});
sciChartSurface.renderableSeries.add(scatterSeries);
return { sciChartSurface };
};

// Initialize the stacked column chart
const initStackedColumnChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const stackedColumnCollection = new StackedColumnCollection(wasmContext);
const series1 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 3, 4, 5, 6],
}),
stroke: strokeColors[2], // Apply stroke color
fill: fillColors[2], // Apply fill color
});
const series2 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [1, 2, 3, 4, 5],
}),
stroke: strokeColors[3], // Apply stroke color
fill: fillColors[3], // Apply fill color
});
stackedColumnCollection.add(series1, series2);
sciChartSurface.renderableSeries.add(stackedColumnCollection);
return { sciChartSurface };
};

// Initialize the mountain chart
const initMountainChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement,
{
theme: new SciChartJsNavyTheme(),
});
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [5, 4, 3, 2, 1],
}),
fill: fillColors[4], // Apply fill color
});
sciChartSurface.renderableSeries.add(mountainSeries);
return { sciChartSurface };
};

// Initialize the pie chart
const initPieChart = async (rootElement) => {
const sciChartSurface = await SciChartPieSurface.create(rootElement, {
theme: new SciChartJsNavyTheme(),
});
const pieChartData = [
{ value: 40, text: "Segment 1", color: strokeColors[0] },
{ value: 30, text: "Segment 2", color: strokeColors[1] },
{ value: 20, text: "Segment 3", color: strokeColors[2] },
{ value: 10, text: "Segment 4", color: strokeColors[3] },
];

pieChartData.forEach((segment) =>
sciChartSurface.pieSegments.add(new PieSegment(segment))
);
return { sciChartSurface };
};

// Dashboard component
const Dashboard = () => {
SciChartSurface.loadWasmFromCDN();
return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px",
backgroundColor: "#1a2a4a", padding: "20px" }}>
{/* First row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initLineChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initScatterChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>

{/* Second row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initStackedColumnChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initMountainChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initPieChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>
</div>
);
};

export default Dashboard;

這個(gè)看起來(lái)好多了！

添加圖例和工具提示

AI聊天歷史記錄現(xiàn)在應(yīng)該有一個(gè)工作代碼，如果沒(méi)有，修復(fù)代碼并將其包含在提示符中。

 現(xiàn)在我們將在圖表中添加圖例和工具提示，這實(shí)際上很容易做到，但想展示使用生成AI工具（如Chat GPT或Deepseek）修改代碼的強(qiáng)大功能。

啟動(dòng)一個(gè)新的提示符：

Deepseek AI直接工作并輸出一些新代碼：

讓我們用新代碼更新dashboard.jsx：

Final dashboard.jsx version #4 with tooltips, legends, zooming

import React from "react";
import {
SciChartSurface,
NumericAxis,
FastLineRenderableSeries,
XyDataSeries,
EllipsePointMarker,
XyScatterRenderableSeries,
StackedColumnCollection,
StackedColumnRenderableSeries,
FastMountainRenderableSeries,
SciChartPieSurface,
PieSegment,
SciChartJsNavyTheme,
LegendModifier,
RolloverModifier,
MouseWheelZoomModifier,
ZoomPanModifier,
ZoomExtentsModifier,
} from "scichart";
import { SciChartReact } from "scichart-react";

// Define pastel colors
const strokeColors = ["#274b92", "#47bde6", "#ae418d", "#e97064", "#68bcae"];
const fillColors = [
"#274b9288",
"#47bde688",
"#ae418d88",
"#e9706488",
"#68bcae88",
];

// Initialize the line chart
const initLineChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 4, 6, 8, 10],
dataSeriesName: "Line Series", // Set dataSeriesName
}),
stroke: strokeColors[0], // Apply stroke color
});
sciChartSurface.renderableSeries.add(lineSeries);

// Add modifiers
sciChartSurface.chartModifiers.add(new LegendModifier());
sciChartSurface.chartModifiers.add(
new RolloverModifier({ showRolloverLine: true, showTooltip: true })
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());

return { sciChartSurface };
};

// Initialize the scatter chart
const initScatterChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [3, 5, 7, 9, 11],
dataSeriesName: "Scatter Series", // Set dataSeriesName
}),
pointMarker: new EllipsePointMarker(wasmContext, {
width: 10,
height: 10,
stroke: strokeColors[1], // Apply stroke color
fill: fillColors[1], // Apply fill color
}),
});
sciChartSurface.renderableSeries.add(scatterSeries);

// Add modifiers
sciChartSurface.chartModifiers.add(new LegendModifier());
sciChartSurface.chartModifiers.add(
new RolloverModifier({ showRolloverLine: true, showTooltip: true })
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());

return { sciChartSurface };
};

// Initialize the stacked column chart
const initStackedColumnChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const stackedColumnCollection = new StackedColumnCollection(wasmContext);
const series1 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [2, 3, 4, 5, 6],
dataSeriesName: "Stacked Column Series 1", // Set dataSeriesName
}),
stroke: strokeColors[2], // Apply stroke color
fill: fillColors[2], // Apply fill color
});
const series2 = new StackedColumnRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [1, 2, 3, 4, 5],
dataSeriesName: "Stacked Column Series 2", // Set dataSeriesName
}),
stroke: strokeColors[3], // Apply stroke color
fill: fillColors[3], // Apply fill color
});
stackedColumnCollection.add(series1, series2);
sciChartSurface.renderableSeries.add(stackedColumnCollection);

// Add modifiers
sciChartSurface.chartModifiers.add(new LegendModifier());
sciChartSurface.chartModifiers.add(
new RolloverModifier({ showRolloverLine: true, showTooltip: true })
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());

return { sciChartSurface };
};

// Initialize the mountain chart
const initMountainChart = async (rootElement) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
rootElement,
{
theme: new SciChartJsNavyTheme(),
}
);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const mountainSeries = new FastMountainRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, {
xValues: [1, 2, 3, 4, 5],
yValues: [5, 4, 3, 2, 1],
dataSeriesName: "Mountain Series", // Set dataSeriesName
}),
fill: fillColors[4], // Apply fill color
});
sciChartSurface.renderableSeries.add(mountainSeries);

// Add modifiers
sciChartSurface.chartModifiers.add(new LegendModifier());
sciChartSurface.chartModifiers.add(
new RolloverModifier({ showRolloverLine: true, showTooltip: true })
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());

return { sciChartSurface };
};

// Initialize the pie chart
const initPieChart = async (rootElement) => {
const sciChartSurface = await SciChartPieSurface.create(rootElement, {
theme: new SciChartJsNavyTheme(),
});
const pieChartData = [
{ value: 40, text: "Segment 1", color: strokeColors[0] },
{ value: 30, text: "Segment 2", color: strokeColors[1] },
{ value: 20, text: "Segment 3", color: strokeColors[2] },
{ value: 10, text: "Segment 4", color: strokeColors[3] },
];

pieChartData.forEach((segment) =>
sciChartSurface.pieSegments.add(new PieSegment(segment))
);

return { sciChartSurface };
};

// Dashboard component
const Dashboard = () => {
SciChartSurface.loadWasmFromCDN();
return (
<div
style={{
display: "flex",
flexDirection: "column",
gap: "20px",
backgroundColor: "#1a2a4a",
padding: "20px",
}}
>
{/* First row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initLineChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initScatterChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>

{/* Second row */}
<div style={{ display: "flex", gap: "20px" }}>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initStackedColumnChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initMountainChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
<div style={{ flex: 1 }}>
<SciChartReact
initChart={initPieChart}
style={{ width: "100%", height: "400px" }}
/>
</div>
</div>
</div>
);
};

export default Dashboard;

這是儀表板結(jié)果與圖例，工具提示和縮放交互。

儀表板示例的最后調(diào)整

這里我們需要做一點(diǎn)調(diào)整，但是代碼在功能上是可以工作的。也就是說(shuō)，如果您把鼠標(biāo)懸停在圖表上，會(huì)看到一些工具提示是非常明亮的白色文本，無(wú)法閱讀。

這是因?yàn)镽olloverModifier默認(rèn)使用RenderableSeries.stroke作為工具提示容器的顏色，并且容器的前景總是白色的。

您可以使用RenderableSeries.rolloverModifierProps屬性來(lái)改變這一點(diǎn)，該屬性允許在每個(gè)系列的基礎(chǔ)上設(shè)置工具提示樣式。

最后一次調(diào)整代碼：

// Initialize the scatter chart
const initScatterChart = async (rootElement) => {
// ...
// after the declaration of scatterSeries, set rollover props

scatterSeries.rolloverModifierProps.tooltipTextColor = "#333";
// ...
}

// Initialize the mountain chart
const initMountainChart = async (rootElement) => {
// ...
// after the declaration of mountainSeries, set rollover props

mountainSeries.rolloverModifierProps.tooltipTextColor = "#333";
// ...
}

應(yīng)該是這樣！下面是最終的儀表板，包括折線圖、散點(diǎn)圖、堆疊柱圖和餅圖：

更多產(chǎn)品信息歡迎“”了解！