翻譯|行業資訊|編輯:龔雪|2025-10-21 11:14:36.637|閱讀 6 次
概述:本文將為大家介紹SciChart JS在極坐標圖定制方面的實踐,歡迎下載最新版組件體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
SciChart JavaScript Charts圖表庫能幫助用戶來探索JS應用程序的最終解決方案,使用WebGL創建動態、高速的圖表和圖形,非常適合實時處理復雜的數據可視化,使用其強大而靈活的JS圖表工具可以提升JavaScript項目。
通過在1000多個輸出類型上使用上萬個屬性,SciChart JavaScript Charts構建了處理科學、醫療、金融、航天航空、賽車運動、石油和天然氣中苛刻的JavaScript圖表和繪圖要求。
在構建 JavaScript 極坐標圖時,您需要的不只是“好看”,而是:
大多數圖表庫停留于極坐標圖的表面定制——顏色、字體、主題,一旦需要一種庫中未預設的圖表類型或非常規行為,就會碰壁。
這正是 SciChart JS v4 的區別所在,它關注結構層面的極坐標圖定制。您擁有原語、API 和渲染控制,來創建真正需要的圖,而不僅是庫作者想到的那種圖。
在SciChart JS v4中,您不必拘泥于模板,SciChart提供了一整套極坐標圖定制工具,可按需構建:
擁有如此廣泛的控制能力,意味著您可以應對各種冷門需求,也能輸出高性能的儀表盤。不需“給圖上皮膚”,而是能從底層“重塑”它們。
不再局限于標準圓形極坐標圖,您可以使用 totalAngle 和 startAngle 以及軸對齊屬性來創建四分之一弧、半圓、中心偏移的圖。比如將 totalAngle = π/2 變成四分之一弧,或 π 變成半圓。
您可以控制極坐標圖的起始角度:比如從 12 點、3 點、6 點或 9 點開始。還可設定順時針或逆時針繪制,甚至翻轉坐標系。通過渲染順序控制,能決定數據層級展示方式,提升可視化清晰度。插值模式也可選擇直線、曲線或極坐標插值。
您可以用原語(矩形、三角形、多邊形)搭建復雜視覺結構,比如直方圖、樹狀圖、事件標記或矢量場圖。通過 gridlineMode 屬性,也能在圓形或多邊形網格(雷達/蜘蛛圖風格)間切換,適合雷達圖、風玫圖 (Windrose) 等。
指針和儀表讓你可配置尺寸、角度、箭頭、閾值等,無需手寫 SVG,快速構建和樣式化徑向儀表。
SciChart 支持在圖表中嵌入 HTML / CSS / React 注釋,使得交互提示框、表單或布局能響應式適配移動端儀表盤。
如果您想構建復雜、定制化、高性能的數據可視化,SciChart JS提供高度的極坐標圖定制靈活性。以下是一些示例和代碼片段,供快速上手:
使用極地熱圖可視化顏色梯度的強度和密度。
啟動代碼
const { PolarMouseWheelZoomModifier, SciChartJsNavyTheme, PolarZoomExtentsModifier, PolarPanModifier, EAxisAlignment, PolarNumericAxis, EPolarLabelMode, SciChartPolarSurface, EPolarAxisMode, NumberRange, HeatmapColorMap, UniformHeatmapDataSeries, PolarUniformHeatmapRenderableSeries, } = SciChart; // or, for npm, import { SciChartSurface, ... } from "scichart" const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(divElementId, { theme: new SciChartJsNavyTheme(), }); const HEATMAP_WIDTH = 48; const HEATMAP_HEIGHT = 10; const angularXAxis = new PolarNumericAxis(wasmContext, { polarAxisMode: EPolarAxisMode.Angular, axisAlignment: EAxisAlignment.Left, visibleRange: new NumberRange(0, HEATMAP_WIDTH), autoTicks: false, majorDelta: 1, polarLabelMode: EPolarLabelMode.Perpendicular, flippedCoordinates: true, // go clockwise totalAngle: Math.PI * 2, }); sciChartSurface.xAxes.add(angularXAxis); const radialYAxis = new PolarNumericAxis(wasmContext, { polarAxisMode: EPolarAxisMode.Radial, axisAlignment: EAxisAlignment.Bottom, visibleRange: new NumberRange(0, HEATMAP_HEIGHT), drawLabels: false, // hide radial labels innerRadius: 0.1, }); sciChartSurface.yAxes.add(radialYAxis); // Add a heatmap series to the chart const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, { dataSeries: new UniformHeatmapDataSeries(wasmContext, { zValues: Array.from({ length: HEATMAP_HEIGHT }, () => { return Array.from({ length: HEATMAP_WIDTH }, () => { return Math.random() * 100; }); }), xStart: 0, yStart: 0, xStep: 1, yStep: 1, }), colorMap: new HeatmapColorMap({ minimum: 0, maximum: 100, gradientStops: [ { offset: 0, color: "lightblue" }, { offset: 1, color: "indigo" }, ] }), }); sciChartSurface.renderableSeries.add(heatmapSeries);
使用三角形系列類型構建具有驚人細節水平的極地地圖。
顯示進度指標和性能指標與極坐標儀表FIFO儀表盤,這個極坐標圖儀表盤示例使用了強大的子圖表API功能,將極坐標圖和笛卡爾圖組合在一個SciChart面上。
啟動代碼
// Demonstrates how to create a gauge chart using ArcAnnotation & PolarPointerAnnotation using SciChart.js const { SciChartPolarSurface, SciChartJsNavyTheme, NumberRange, PolarArcAnnotation, PolarNumericAxis, EPolarAxisMode, } = SciChart; // or, for npm, import { SciChartSurface, ... } from "scichart" const { wasmContext, sciChartSurface } = await SciChartPolarSurface.create(divElementId, { theme: new SciChartJsNavyTheme(), }); // The gauge angle const gaugeTotalAngle = Math.PI * 1.2; const gaugeRange = new NumberRange(0, 100); // the range of the gauge // Add the axes const angularXAxis = new PolarNumericAxis(wasmContext, { polarAxisMode: EPolarAxisMode.Angular, visibleRange: gaugeRange, // 0 - 100 flippedCoordinates: true, // go clockwise totalAngle: gaugeTotalAngle, startAngle: (Math.PI - gaugeTotalAngle) / 2, // to center the bottom gap isVisible: false, }); sciChartSurface.xAxes.add(angularXAxis); const radialYAxis = new PolarNumericAxis(wasmContext, { polarAxisMode: EPolarAxisMode.Radial, visibleRange: new NumberRange(0, 10), // 0 - 10 isVisible: false, }); sciChartSurface.yAxes.add(radialYAxis); // (optional) add a gray background Arc const backgroundArc = new PolarArcAnnotation({ y1: 10, // outer radius of the arc relative to the center of the gauge y2: 8, // inner radius of the arc x1: gaugeRange.min, // start angle -> 0 x2: gaugeRange.max, // end angle -> 100 fill: "#88888822", strokeThickness: 0 }); // The Value Arc const valueArc = new PolarArcAnnotation({ y1: 10, // outer radius y2: 8, // inner radius x1: gaugeRange.min, // start angle -> 0 x2: 50 + Math.random() * 30, // current value (end of arc) fill: "#3388FF", stroke: "#FFFFFF", strokeThickness: 3 }); sciChartSurface.annotations.add(backgroundArc, valueArc);
SciChart JS v4 不只是一個普通圖表庫。它是一個能服從您用例的圖表引擎。憑借可預測的 API(易于調試)、可復用配置(加快儀表盤部署)以及支持大規模實時數據的性能,SciChart JS 的極坐標定制能力在構建真正個性化、高效圖表解決方案方面具有顯著優勢。
通過“配置優于 hack”,您可以更快交付極坐標圖可視化項目,也能滿足冷門、復雜的圖表需求。更重要的是,還可獲得一種未來可持續的方案 — 定期更新、響應式設計、長遠維護。
更多產品更新信息歡迎“”了解!
慧都是?家?業數字化解決?案公司,專注于軟件、?油與?業領域,以深?的業務理解和?業經驗,幫助企業實現智能化轉型與持續競爭優勢。
慧都科技是SciChart的中國區的合作伙伴,SciChart作為數據可視化領域的優秀產品,通過GPU加速的高性能圖表庫,助力企業實時處理與可視化超大規模數據(如十億級點云、高頻振動分析),提供低延遲、高刷新率的交互式圖表(如2D/3D、極坐標、熱圖等),滿足金融、工業、科研等領域對海量數據實時監控與深度分析的需求,顯著提升開發效率與決策精準度
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都網