如何解决IIFE版本lightchartchart xydata
const { createSampledDataGenerator } = require（'@ arction / xydata'）
大家好，我正在尝试让此ECG（https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0150-ecg.html）在没有nodejs或nmp的情况下工作。我已经看到可以使用IIFE js版本。在网站上实施IIFE版本时，我发现运行上述命令时出错，无法在Web服务器中执行。我该如何运行？是否有IIFE版本的xydata？ 我必须包含什么脚本以及如何包含？谢谢
解决方法
可以使用xydata版本的
xydata版本在浏览器中直接运行 .iife.js。您可以从npm下载@arction/xydata软件包并从那里使用xydata.iife.js文件，也可以使用UNPKG之类的CDN。
在您的html头中添加<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js">（如果要在本地提供文件，请替换src url）
然后仅将require("@arction/xydata")替换为xydata。该iife文件会将xydata变量添加到全局上下文中。
请参阅下面的完整示例。我确实必须削减示例中的数据量以使其适合此处的示例，因为StackOverflow限制了答案的长度。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@arction/lcjs@2.0.3/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>
<title>Using chart in HTML page</title>
<meta charset="utf-8" />
<!-- Flexbox styling to have the chart and header fill the page.
Chart will take as much space as possible. -->
<style>
html,body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
</style>
</head>
<body class="box">
<h1 class="row header">LightningChart<sup>®</sup> JS in HTML page</h1>
<!-- Create div to render the chart into-->
<div id="target" class="row content"></div>
<!--IIFE assembly (lcjs.iife.js) is a standalone JS file,which does not need any build tools,such as NPM,to be installed-->
<!--Script source must be defined in it's own script tag-->
<script src="lcjs.iife.js"></script>
<!--Actual chart related script tag-->
<script>
// Replace the contents of this script tag if you want to test code from our examples:
// https://www.arction.com/lightningchart-js-interactive-examples/
// Extract required parts from LightningChartJS.
const {
lightningChart,DataPatterns,AxisScrollStrategies,SolidLine,SolidFill,ColorHEX,AutoCursorModes,Themes
} = lcjs
// Import data-generators from 'xydata'-library.
const {
createSampledDataGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY({
// theme: Themes.dark
container: 'target'
}).setTitle('ECG')
// Add line series to visualize the data received
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
// Style the series
series
.setStrokeStyle(new SolidLine({
thickness: 2,fillStyle: new SolidFill({
color: ColorHEX('#5aafc7')
})
}))
.setMouseInteractions(false)
chart.setAutoCursorMode(AutoCursorModes.disabled)
// Setup view nicely.
chart.getDefaultAxisY()
.setTitle('mV')
.setInterval(-1600,1000)
.setScrollStrategy(AxisScrollStrategies.expansion)
chart.getDefaultAxisX()
.setTitle('milliseconds')
.setInterval(0,2500)
.setScrollStrategy(AxisScrollStrategies.progressive)
// Points that are used to generate a continuous stream of data.
const point = [{
x: 2,y: 81
},{
x: 3,y: 83
},{
x: 4,y: 88
},{
x: 5,y: 98
},{
x: 6,y: 92
},{
x: 7,y: 85
},{
x: 8,y: 73
},{
x: 9,y: 71
},{
x: 10,y: 70
},{
x: 11,{
x: 12,{
x: 13,y: 79
},{
x: 14,y: 84
},{
x: 15,y: 78
},{
x: 16,y: 67
},{
x: 17,{
x: 18,y: 76
},{
x: 19,y: 77
},{
x: 20,y: 64
},{
x: 21,y: 53
},{
x: 22,y: 0
},{
x: 23,y: 41
},{
x: 24,y: 51
},{
x: 25,y: 3
},{
x: 26,y: 31
},{
x: 27,y: 37
},{
x: 28,y: 35
},{
x: 29,y: 48
},{
x: 30,y: 40
},{
x: 31,y: 42
},{
x: 32,{
x: 33,y: 32
},{
x: 34,y: 21
},{
x: 35,{
x: 36,{
x: 37,y: 47
},{
x: 38,y: 45
},{
x: 39,{
x: 40,y: 28
},{
x: 41,y: 15
},{
x: 42,y: 1
},{
x: 43,y: -12
},{
x: 44,y: -4
},{
x: 45,{
x: 46,y: 23
},{
x: 47,y: 22
},{
x: 48,{
x: 49,y: 46
},{
x: 50,y: 49
},{
x: 51,{
x: 52,y: 43
},{
x: 53,y: 52
},{
x: 54,{
x: 55,y: 44
},{
x: 56,{
x: 57,{
x: 58,{
x: 59,y: 57
},{
x: 60,{
x: 61,y: 65
},{
x: 62,y: 58
},{
x: 63,{
x: 64,y: 34
},{
x: 65,{
x: 66,{
x: 67,y: 11
},{
x: 68,y: 7
},{
x: 69,y: 14
},{
x: 70,{
x: 71,y: 18
},{
x: 72,{
x: 73,{
x: 74,{
x: 75,{
x: 76,{
x: 77,{
x: 78,y: -3
},{
x: 79,y: -8
},{
x: 80,y: -11
},{
x: 81,y: -20
},{
x: 82,y: -28
},{
x: 83,{
x: 84,{
x: 85,y: 20
},{
x: 86,y: 26
},{
x: 87,{
x: 88,y: 24
},{
x: 89,{
x: 90,{
x: 91,y: 30
},{
x: 92,{
x: 93,y: 12
},{
x: 94,{
x: 95,{
x: 96,{
x: 97,{
x: 98,{
x: 99,y: 25
},{
x: 100,y: 13
},{
x: 101,y: 2
},{
x: 102,{
x: 103,y: -10
},{
x: 104,{
x: 105,{
x: 106,y: 8
},{
x: 107,{
x: 108,{
x: 109,{
x: 110,{
x: 111,{
x: 112,y: 19
},{
x: 113,{
x: 114,{
x: 115,y: -14
},{
x: 116,{
x: 117,y: -22
},{
x: 118,y: -24
},{
x: 119,y: -29
},{
x: 120,y: -21
},{
x: 121,y: -19
},{
x: 122,y: -26
},{
x: 123,y: -9
},{
x: 124,{
x: 125,y: -6
},{
x: 126,{
x: 127,y: -31
},{
x: 128,y: -52
},{
x: 129,y: -57
},{
x: 130,y: -40
},{
x: 131,{
x: 132,{
x: 133,{
x: 134,y: 10
},{
x: 135,y: 6
},{
x: 136,{
x: 137,y: -5
},{
x: 138,y: -2
},{
x: 139,y: 9
},{
x: 140,{
x: 141,y: 36
},{
x: 142,{
x: 143,y: 61
},{
x: 144,y: 56
},{
x: 145,{
x: 146,{
x: 147,y: 38
},{
x: 148,y: 29
},{
x: 149,y: 33
},{
x: 150,{
x: 151,{
x: 152,y: -7
},{
x: 153,{
x: 154,{
x: 155,{
x: 156,{
x: 157,y: 5
},{
x: 158,{
x: 159,{
x: 160,{
x: 161,{
x: 162,{
x: 163,{
x: 164,y: 17
},{
x: 165,{
x: 166,{
x: 167,{
x: 168,y: 16
},{
x: 169,{
x: 170,{
x: 171,{
x: 172,y: -16
},{
x: 173,y: -18
}
]
// Create a data generator to supply a continuous stream of data.
createSampledDataGenerator(point,1,10)
.setSamplingFrequency(1)
.setInputData(point)
.generate()
.setStreamBatchSize(48)
.setStreamInterval(50)
.setStreamRepeat(true)
.toStream()
.forEach(point => {
// Push the created points to the series.
series.add({
x: point.timestamp,y: point.data.y
})
})
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
