SciChart：使用缩放模块不起作用

Question

我正在使用 SciChart 库来显示图表。

我想知道，如何在纯 HTML & CSS 的网站中使用 SciChart 库的 MouseWheelZoomModifier 模块。

我知道有与 React 相关的可用文档，但我没有在我的网站中使用它。

我写了下面的代码：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Include SciChart.js -->
    <script
      src="https://cdn.jsdelivr.net/npm/scichart@2.1.2290/_wasm/scichart.browser.js"
      crossorigin="anonymous"
    ></script>
    <title>Hello, SciChart.js world!</title>
  </head>
  <body>
    <h1>Hello, SciChart.js world!</h1>
    <!-- Create the Div to host the SciChartSurface -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>
    <!-- The JavaScript to create a SciChartSurface -->
    <script>
      async function initSciChart() {
        // In order to load data file from the CDN we need to set dataUrl
        SciChart.SciChartSurface.configure({
          dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${SciChart.libraryVersion}/_wasm/scichart2d.data`,
          wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SciChart.libraryVersion}/_wasm/scichart2d.wasm`
        });
        // Create a SciChartSurface inside the div with id 'scichart-root'
        const {
          sciChartSurface,
          wasmContext
        } = await SciChart.SciChartSurface.create("scichart-root");

        // Add an X and a Y Axis
        const xAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.xAxes.add(xAxis);
        const yAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.yAxes.add(yAxis);
        
         // Create 100 dataseries, each with 10k points
        for (let seriesCount = 0; seriesCount < 100; seriesCount++) {       
            const xyDataSeries = new SciChart.XyDataSeries(wasmContext);
            const opacity = (1 - ((seriesCount / 120))).toFixed(2);
            // Populate with some data
            for(let i = 0; i < 10000; i++) {
                xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
            }
            // Add and create a line series with this data to the chart
            // Create a line series       
            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                dataSeries: xyDataSeries,
                stroke: `rgba(176,196,222,${opacity})`,
                strokeThickness:2
            });
            sciChartSurface.renderableSeries.add(lineSeries);
        }
        
        // BELOW ONE NOT WORKING
        // Add zoom, pan behaviours to the chart. Mousewheel zoom, panning and double-click to
        // zoom to fit
        const mouseWheelZoomModifier = new MouseWheelZoomModifier();
        const zoomPanModifier = new ZoomPanModifier();   
        const rubberBandZoomModifier = new RubberBandXyZoomModifier();
        const zoomExtentsModifier = new ZoomExtentsModifier();   
        sciChartSurface.chartModifiers.add(zoomExtentsModifier);
        sciChartSurface.chartModifiers.add(zoomPanModifier);
        sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
        sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);   
        const inputEnablePan = document.getElementById("enable-pan");
        const inputEnableZoom = document.getElementById("enable-zoom");
        const inputEnableZoomToFit = document.getElementById("enable-zoom-to-fit");
        const inputEnableMouseWheel = document.getElementById("enable-mouse-wheel-zoom");
        inputEnablePan.addEventListener("input", (event) => {
            zoomPanModifier.isEnabled = inputEnablePan.checked;
            rubberBandZoomModifier.isEnabled = !inputEnablePan.checked;
            inputEnableZoom.checked = !inputEnablePan.checked;       
            console.log(`Enabling Drag to Pan. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
        });
        inputEnableZoom.addEventListener("input", (event) => {
            rubberBandZoomModifier.isEnabled = inputEnableZoom.checked;
            zoomPanModifier.isEnabled = !inputEnableZoom.checked;
            inputEnablePan.checked = !inputEnableZoom.checked;
            console.log(`Enabling Drag to Zoom. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
        });
        inputEnableZoomToFit.addEventListener("input", (event) => {
            zoomExtentsModifier.isEnabled = inputEnableZoomToFit.checked;
            console.log("Enabling zoom extents");
        });
        inputEnableMouseWheel.addEventListener("input", (event) => {
            mouseWheelZoomModifier.isEnabled = inputEnableMouseWheel.checked;
            console.log("Enabling Mousewheel zoom");
        });
        
      }
      initSciChart();
    
    </script>
  </body>
</html>

输出：

MouseWheelZoomModifier 实际上是在 React 教程中使用 import 关键字导入的模块，但我如何在基于 HTML & CSS 的网页中使用它。

请帮忙。

Answer 1

因为您使用的是 SciChart's Browser module（代码由 CDN 和 JS 而不是 npm/webpack 提供），所以您需要使用稍微不同的方式在代码中声明对象。

注意 Tutorial for setting up SciChart.js with browser module 说

Notice every API call is prefixed by SciChart. when using the browser bundle. This is the global namespace for all SciChart apis, functions and types.

添加脚本以包含 scichart.js（和版本）

<script src="https://cdn.jsdelivr.net/npm/scichart@2.1.2290/_wasm/scichart.browser.js" crossorigin="anonymous"></script>

您现在必须告诉 SciChart 从何处加载 wasm 文件。最简单的方法是调用 SciChartSurface.useWasmFromCDN();

SciChart.SciChartSurface.useWasmFromCDN();

接下来，当不使用 npm/webpack 时，SciChart 库中的每个类型现在都带有全局变量 SciChart.

例如，在我们的 npm/webpack 文档中，此代码：

const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

必须变成这样

const mouseWheelZoomModifier = new SciChart.MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

或者您可以 pre-declare 这些类型如下：

// When using SciChart from CDN / browser bundle, there are no imports
// so either prepend every variable by global namespace SciChart.
// or use code like this to get the types out
const {
    MouseWheelZoomModifier,
    SciChartSurface,
    NumericAxis
} = SciChart;

// static func. Call once. load wasm from CDN 
SciChartSurface.useWasmFromCDN(); 

// Create a SciChartSurface in <div id="div-id"/>
const { sciChartSurface, wasmContext } = SciChartSurface.create("div-id");

// Add x,y axis 
sciChartSurface.xAxes.add(new NumericAxis(wasmContext)); 
sciChartSurface.yAxes.add(new NumericAxis(wasmContext)); 

// Add modifiers for zooming, panning
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

试一试，看看是否有效

SciChart：使用缩放模块不起作用

SciChart: Working with Zooming module is not working

scichart

scichart.js