可视化工具SciChart如何结合Deepseek快速创建一个React仪表板？
SciChart JavaScript Charts图表库能帮助用户来探索JS应用程序的最终解决方案，使用WebGL创建动态、高速的图表和图形，非常适合实时处理复杂的数据可视化，使用其强大而灵活的JS图表工具可以提升JavaScript项目。
通过在1000多个输出类型上使用上万个属性，SciChart JavaScript Charts构建了处理科学、医疗、金融、航天航空、赛车运动、石油和天然气中苛刻的JavaScript图表和绘图要求。
立即获取SciChart 工具 新版试用
在本文中我们将在20分钟内用React和SciChart.js创建一个完全交互式的动态仪表板，几乎完全使用AI进行编码。仪表板有五种不同类型的图表：React折线图、React散点图、React堆叠柱图和React饼图，以网格布局排列。我们将介绍如何将SciChart.js集成到React仪表板中，使用SciChart-react应用自定义主题，并定位图表以保持一致的布局。在本教程结束时，您将拥有一个功能齐全的React仪表板，可以自定义用于任何领域的数据可视化。
引言
数据可视化是现代Web应用程序的一个关键方面，它使用户能够一目了然地理解复杂的数据。随着SciChart.js等强大的React图表库的兴起，开发人员现在可以轻松创建令人惊叹的高性能可视化。当与React（一个流行的JavaScript库，用于构建带有交互式仪表板的用户界面）结合使用时，可能性是很大的。
在这篇博客中，我们将探索如何构建一个动态仪表板，展示五种不同的图表类型，所有这些都无缝集成到一个视图中。仪表板的设计是交互式的，有工具提示、图例、缩放和平移行为，让您可以在飞行模式中检查数据。
本文将通过使用Deepseek R1 来展示生成式AI工具在创建React仪表板布局中的强大功能，并展示使用的提示以及需要进行哪些更改才能使仪表板工作。
入门指南
创建输入提示符
我们从使用Deepseek开始教程，它在编码基准测试中得分很高，并且运行成本比较低。
从第一个提示符开始。
Deepseek直接处理输出，正确地建议使用“npm install scchart scchart -react”。然后，它提供JSX输出以包含在应用程序中。
DeepSeek的第一个输出提供了良好的代码，但略有错误，我们稍后会对它进行修改和更正，这是仪表板的初稿。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中创建项目
让我们将其导出到一个IDE中，本教程我们将使用codesandbox，它提供了一个现成的浏览器IDE，具有完整的npm、 JavaScript和react支持。
在codesandbox的主页上，点击“Create”创建一个新的sandbox。
选择React（TS）作为模板，这将创建一个新的react项目，支持npm和TypeScript或JavaScript。
在依赖项部分，添加scichart和scichart-react，这相当于在IDE中使用npm安装scichart scichart-react，Package. json应该更新如下：
接下来，创建一个名为dashboard.jsx的文件，粘贴上述提示符输出的代码。注意代码是不正确的，因为AI还不完美，但我们会做一些小的改变来编译它。
现在，修改默认的App.tsx来包含一个Dashboard组件：
import "./styles.css";
import Dashboard from "./dashboard";
export default function App() {
return (
<div className="App">
<Dashboard />
</div>
);
}在下一节中，我们将处理这些错误，来获得一个正常工作的React Dashboard。
让仪表板正常工作
开始处理这些错误。
Error #1: 检查类型正确
ChatGPT或Deepseek等人工智能经常在语法上犯细微的错误，这是因为他们接受过整个互联网的培训，但可能对像SciChart这样的特定库没有具体的了解。
例如，在dashboardjsx中，FastScatterRenderableSeries是不正确的——这应该是XyScatterRenderableSeries。检查其他导入不良的类型或类型错误，Codesandbox将指出语法错误，并对在SciChart库中找到的类型信息进行自动补全（智能感知）。
Error #2：无法加载图表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
发生此错误是因为您需要打包wasm和data文件或从CDN加载它们。
在Dashboard react组件的开头添加一个对SciChartSurface.loadWasmFromCDN()的调用。
// 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不是一个构造器
我们可以从SciChart JavaScript 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;
};Error #4：“initChart”函数应该解析为具有“sciChartSurface”属性的对象（{sciChartSurface}）
这个错误与使用scichart-react有关，下面是正确的代码：
// 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仪表板
现在您应该有一个工作的指示板，它看起来有点乏味，但我们将在下一节中对其进行修改。
下面是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主题非常强大，SciChartJsNavyTheme包含一组预定义的系列颜色，这些颜色与图表的背景颜色看起来很好。然而，对于某些系列，当不设置系列颜色时，您将获得缺乏想象力的灰色。
让我们再次利用Deepseek来修改代码，使用一个新的提示传递工作代码并请求更改。
因为我们已经给了AI工作代码，所以它应该直接修改代码而不会出现错误。下面是带有样式和颜色的输出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;这个看起来好多了！
添加图例和工具提示
AI聊天历史记录现在应该有一个工作代码，如果没有，修复代码并将其包含在提示符中。
现在我们将在图表中添加图例和工具提示，这实际上很容易做到，但想展示使用生成AI工具（如Chat GPT或Deepseek）修改代码的强大功能。
启动一个新的提示符：
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;这是仪表板结果与图例，工具提示和缩放交互。
仪表板示例的最后调整
这里我们需要做一点调整，但是代码在功能上是可以工作的。也就是说，如果您把鼠标悬停在图表上，会看到一些工具提示是非常明亮的白色文本，无法阅读。
这是因为RolloverModifier默认使用RenderableSeries.stroke作为工具提示容器的颜色，并且容器的前景总是白色的。
您可以使用RenderableSeries.rolloverModifierProps属性来改变这一点，该属性允许在每个系列的基础上设置工具提示样式。
最后一次调整代码：
// 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";
// ...
}应该是这样！下面是最终的仪表板，包括折线图、散点图、堆叠柱图和饼图：
