SciChart JavaScript Charts圖表庫能幫助用戶來探索JS應用程序的最終解決方案，使用WebGL創建動態、高速的圖表和圖形，非常適合實時處理復雜的數據可視化，使用其強大而靈活的JS圖表工具可以提升JavaScript項目。
通過在1000多個輸出類型上使用上萬個屬性，SciChart JavaScript Charts構建了處理科學、醫療、金融、航天航空、賽車運動、石油和天然氣中苛刻的JavaScript圖表和繪圖要求。
在本文中我們將在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";
// ...
}
應該是這樣！下面是最終的儀表板，包括折線圖、散點圖、堆疊柱圖和餅圖：
更多產品信息歡迎“”了解！
慧都科技是SciChart產品中國區官方授權代理商，擁有負責SciChart產品免費試用、咨詢、正版銷售等于一體的專業化中文服務，如有需求，歡迎來電詳詢：
023-68661681。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都網
半島外圍網上直營 
19次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線