前面我们用了ECharts作为图表显示框架今天我们介绍一个专门为大数据集显示服务的图表显示框架SciChart。相比于ECharts,SciChart适配多种编程语言更容易实现跨平台应用SciChart试商用软件但是幸运的是其JS版本提供了免费的试用版。只要不拿来进行商业行为或者发表论文正常使用应该问题不大。SciChart安装和大部分框架一样SciChart可以通过多种方式引入CDN React Angular npmWebpack 等。CDN方式适合原生HTMLJavaScript的方法React和Angular需要与前端框架绑定作为Node玩家本人较推荐npmWebpack打包的方式重点介绍一下其他方式请参阅官网教程其实下面内容也是来自官方教程。1.安装SciChartnpm install scichart2.安装Webpacknpm install--save-devwebpack npm install--save-devwebpack-dev-server npm install--save-devwebpack-clinpm install--save-devcopy-webpack-plugin3.设置Webpack.config.js 和 package.json该文件放在项目根目录下//Webpack.config.jsmodule.exports{mode:production,entry:./src/index.js,performance:{hints:false},module:{rules:[]},resolve:{extensions:[.js]},output:{filename:bundle.js,path:path.resolve(__dirname,build)},plugins:[newCopyPlugin({patterns:[{from:src/index.html,to:},{from:node_modules/scichart/_wasm/scichart2d.wasm,to:}]})],devServer:{host:0.0.0.0,// 监听所有网络接口允许外部/局域网访问port:8080,// 指定监听端口为 8080hot:true,// 开启热模块替换 (HMR)open:true// 启动后自动打开浏览器}};package.json文件中需要设置webpack-dev-server启动方式scripts:{build:webpack,start:webpack-dev-server},4.创建根文件在项目根目录下新建src文件夹新建index.html和index.js两个文件!--src/index.html --htmllangen-usheadmetacharsetutf-8/metacontenttext/html; charsetutf-8http-equivContent-Type/linkreliconhrefdata:,titleSciChart.js Tutorial 1/titlescriptasynctypetext/javascriptsrcbundle.js/scriptstylebody{font-family:Arial}/style/headbody!-- 和ECahrts类似 需要一个div作为图表显示容器 其id为scichart-root--dividscichart-rootstylewidth:800px;height:600px;/div/body/html// src/index.jsimport{SciChartSurface,NumericAxis,FastLineRenderableSeries,XyDataSeries,}fromscichart;asyncfunctioninitSciChart(){//创建一个SciChartSurface对象const{sciChartSurface,wasmContext}awaitSciChartSurface.create(scichart-root);// 创建X、Y轴sciChartSurface.xAxes.add(newNumericAxis(wasmContext));sciChartSurface.yAxes.add(newNumericAxis(wasmContext));// 创建数据集constxyDataSeriesnewXyDataSeries(wasmContext);xyDataSeries.append(1,2);xyDataSeries.append(3,4);xyDataSeries.append(5,8);// 增加一条直线sciChartSurface.renderableSeries.add(newFastLineRenderableSeries(wasmContext,{strokeThickness:3,stroke:rgba(255, 0, 0, 1),dataSeries:xyDataSeries,}));// 根据数据自适应坐标轴尺寸sciChartSurface.zoomExtents();}initSciChart();5.通过Webpack-dev 启动前端页面webpack-dev-server启动完成后打开浏览器输入网址可以看到示例图表** 和其他图形框架一样SciChart可以显示很多花里胡哨的图表这里不再赘述后面用到再说 **