SciChart JavaScript ChartsSciChart JavaScript Charts图表库能帮助用户来探索JS应用程序的最终解决方案使用WebGL创建动态、高速的图表和图形非常适合实时处理复杂的数据可视化使用其强大而灵活的JS图表工具可以提升JavaScript项目。通过在1000多个输出类型上使用上万个属性SciChart JavaScript Charts构建了处理科学、医疗、金融、航天航空、赛车运动、石油和天然气中苛刻的JavaScript图表和绘图要求。在本文中我们将在20分钟内用React和SciChart.jsSciChart.js创建一个完全交互式的动态仪表板几乎完全使用AI进行编码。仪表板有五种不同类型的图表React折线图、React散点图、React堆叠柱图和React饼图以网格布局排列。我们将介绍如何将SciChart.js集成到React仪表板中使用SciChartSciChart-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 errorsimport 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。选择ReactTS作为模板这将创建一个新的react项目支持npm和TypeScript或JavaScript。在依赖项部分添加scichart和scichart-react这相当于在IDE中使用npm安装scichart scichart-reactPackage. json应该更新如下接下来创建一个名为dashboard.jsx的文件粘贴上述提示符输出的代码。注意代码是不正确的因为AI还不完美但我们会做一些小的改变来编译它。现在修改默认的App.tsx来包含一个Dashboard组件import ./styles.css; import Dashboard from ./dashboard; export default function App() { return ( div classNameApp 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 JavaScriptSciChart 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 dashboardimport 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 stylesimport 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.jsxFinal dashboard.jsx version #4 with tooltips, legends, zoomingimport 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; // ... }应该是这样下面是最终的仪表板包括折线图、散点图、堆叠柱图和饼图