IIFE版lightningchart xydata
IIFE version lightningchart xydata
常量{
创建采样数据生成器
} = require('@arction/xydata')
大家好，我正在尝试让这个 ECG (https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0150-ecg.html) 在没有 nodejs 或 nmp 的情况下工作。我已经看到可以使用 IIFE js 版本。在网站上实施 IIFE 版本时，我发现上面的命令有一个错误 运行，我无法在我的网络服务器中执行。我怎么能运行呢？ xydata 有 IIFE 版本吗？
我必须包含什么脚本以及如何包含？谢谢
xydata 可以直接在浏览器中使用 .iife.js 版本的 xydata 构建 运行。您可以从 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 变量添加到全局上下文。
请参阅下面的完整工作示例。我确实必须削减示例中的数据量才能适合此处的示例，因为 Whosebug 限制了答案的长度。
<!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,
y: 83
},
{
x: 12,
y: 73
},
{
x: 13,
y: 79
},
{
x: 14,
y: 84
},
{
x: 15,
y: 78
},
{
x: 16,
y: 67
},
{
x: 17,
y: 71
},
{
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,
y: 42
},
{
x: 33,
y: 32
},
{
x: 34,
y: 21
},
{
x: 35,
y: 41
},
{
x: 36,
y: 48
},
{
x: 37,
y: 47
},
{
x: 38,
y: 45
},
{
x: 39,
y: 42
},
{
x: 40,
y: 28
},
{
x: 41,
y: 15
},
{
x: 42,
y: 1
},
{
x: 43,
y: -12
},
{
x: 44,
y: -4
},
{
x: 45,
y: 15
},
{
x: 46,
y: 23
},
{
x: 47,
y: 22
},
{
x: 48,
y: 40
},
{
x: 49,
y: 46
},
{
x: 50,
y: 49
},
{
x: 51,
y: 48
},
{
x: 52,
y: 43
},
{
x: 53,
y: 52
},
{
x: 54,
y: 49
},
{
x: 55,
y: 44
},
{
x: 56,
y: 41
},
{
x: 57,
y: 41
},
{
x: 58,
y: 45
},
{
x: 59,
y: 57
},
{
x: 60,
y: 67
},
{
x: 61,
y: 65
},
{
x: 62,
y: 58
},
{
x: 63,
y: 47
},
{
x: 64,
y: 34
},
{
x: 65,
y: 35
},
{
x: 66,
y: 23
},
{
x: 67,
y: 11
},
{
x: 68,
y: 7
},
{
x: 69,
y: 14
},
{
x: 70,
y: 23
},
{
x: 71,
y: 18
},
{
x: 72,
y: 31
},
{
x: 73,
y: 35
},
{
x: 74,
y: 44
},
{
x: 75,
y: 49
},
{
x: 76,
y: 34
},
{
x: 77,
y: 7
},
{
x: 78,
y: -3
},
{
x: 79,
y: -8
},
{
x: 80,
y: -11
},
{
x: 81,
y: -20
},
{
x: 82,
y: -28
},
{
x: 83,
y: -4
},
{
x: 84,
y: 15
},
{
x: 85,
y: 20
},
{
x: 86,
y: 26
},
{
x: 87,
y: 26
},
{
x: 88,
y: 24
},
{
x: 89,
y: 34
},
{
x: 90,
y: 35
},
{
x: 91,
y: 30
},
{
x: 92,
y: 22
},
{
x: 93,
y: 12
},
{
x: 94,
y: 15
},
{
x: 95,
y: 18
},
{
x: 96,
y: 24
},
{
x: 97,
y: 18
},
{
x: 98,
y: 26
},
{
x: 99,
y: 25
},
{
x: 100,
y: 13
},
{
x: 101,
y: 2
},
{
x: 102,
y: 1
},
{
x: 103,
y: -10
},
{
x: 104,
y: -10
},
{
x: 105,
y: -4
},
{
x: 106,
y: 8
},
{
x: 107,
y: 15
},
{
x: 108,
y: 15
},
{
x: 109,
y: 15
},
{
x: 110,
y: 15
},
{
x: 111,
y: 18
},
{
x: 112,
y: 19
},
{
x: 113,
y: 3
},
{
x: 114,
y: -12
},
{
x: 115,
y: -14
},
{
x: 116,
y: -10
},
{
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,
y: -10
},
{
x: 125,
y: -6
},
{
x: 126,
y: -8
},
{
x: 127,
y: -31
},
{
x: 128,
y: -52
},
{
x: 129,
y: -57
},
{
x: 130,
y: -40
},
{
x: 131,
y: -20
},
{
x: 132,
y: 7
},
{
x: 133,
y: 14
},
{
x: 134,
y: 10
},
{
x: 135,
y: 6
},
{
x: 136,
y: 12
},
{
x: 137,
y: -5
},
{
x: 138,
y: -2
},
{
x: 139,
y: 9
},
{
x: 140,
y: 23
},
{
x: 141,
y: 36
},
{
x: 142,
y: 52
},
{
x: 143,
y: 61
},
{
x: 144,
y: 56
},
{
x: 145,
y: 48
},
{
x: 146,
y: 48
},
{
x: 147,
y: 38
},
{
x: 148,
y: 29
},
{
x: 149,
y: 33
},
{
x: 150,
y: 20
},
{
x: 151,
y: 1
},
{
x: 152,
y: -7
},
{
x: 153,
y: -9
},
{
x: 154,
y: -4
},
{
x: 155,
y: -12
},
{
x: 156,
y: -3
},
{
x: 157,
y: 5
},
{
x: 158,
y: -3
},
{
x: 159,
y: 12
},
{
x: 160,
y: 6
},
{
x: 161,
y: -10
},
{
x: 162,
y: -2
},
{
x: 163,
y: 15
},
{
x: 164,
y: 17
},
{
x: 165,
y: 21
},
{
x: 166,
y: 22
},
{
x: 167,
y: 15
},
{
x: 168,
y: 16
},
{
x: 169,
y: 1
},
{
x: 170,
y: -2
},
{
x: 171,
y: -9
},
{
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>
常量{ 创建采样数据生成器 } = require('@arction/xydata')
大家好，我正在尝试让这个 ECG (https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0150-ecg.html) 在没有 nodejs 或 nmp 的情况下工作。我已经看到可以使用 IIFE js 版本。在网站上实施 IIFE 版本时，我发现上面的命令有一个错误 运行，我无法在我的网络服务器中执行。我怎么能运行呢？ xydata 有 IIFE 版本吗？ 我必须包含什么脚本以及如何包含？谢谢
xydata 可以直接在浏览器中使用 .iife.js 版本的 xydata 构建 运行。您可以从 npm 下载 @arction/xydata 包并从那里使用 xydata.iife.js 文件，或者您可以使用像 UNPKG.
在您的 html 头部添加 <script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js">（如果您在本地提供文件，请替换 src url）
然后将 require("@arction/xydata") 替换为 xydata。 iife 文件会将 xydata 变量添加到全局上下文。
请参阅下面的完整工作示例。我确实必须削减示例中的数据量才能适合此处的示例，因为 Whosebug 限制了答案的长度。
<!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,
y: 83
},
{
x: 12,
y: 73
},
{
x: 13,
y: 79
},
{
x: 14,
y: 84
},
{
x: 15,
y: 78
},
{
x: 16,
y: 67
},
{
x: 17,
y: 71
},
{
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,
y: 42
},
{
x: 33,
y: 32
},
{
x: 34,
y: 21
},
{
x: 35,
y: 41
},
{
x: 36,
y: 48
},
{
x: 37,
y: 47
},
{
x: 38,
y: 45
},
{
x: 39,
y: 42
},
{
x: 40,
y: 28
},
{
x: 41,
y: 15
},
{
x: 42,
y: 1
},
{
x: 43,
y: -12
},
{
x: 44,
y: -4
},
{
x: 45,
y: 15
},
{
x: 46,
y: 23
},
{
x: 47,
y: 22
},
{
x: 48,
y: 40
},
{
x: 49,
y: 46
},
{
x: 50,
y: 49
},
{
x: 51,
y: 48
},
{
x: 52,
y: 43
},
{
x: 53,
y: 52
},
{
x: 54,
y: 49
},
{
x: 55,
y: 44
},
{
x: 56,
y: 41
},
{
x: 57,
y: 41
},
{
x: 58,
y: 45
},
{
x: 59,
y: 57
},
{
x: 60,
y: 67
},
{
x: 61,
y: 65
},
{
x: 62,
y: 58
},
{
x: 63,
y: 47
},
{
x: 64,
y: 34
},
{
x: 65,
y: 35
},
{
x: 66,
y: 23
},
{
x: 67,
y: 11
},
{
x: 68,
y: 7
},
{
x: 69,
y: 14
},
{
x: 70,
y: 23
},
{
x: 71,
y: 18
},
{
x: 72,
y: 31
},
{
x: 73,
y: 35
},
{
x: 74,
y: 44
},
{
x: 75,
y: 49
},
{
x: 76,
y: 34
},
{
x: 77,
y: 7
},
{
x: 78,
y: -3
},
{
x: 79,
y: -8
},
{
x: 80,
y: -11
},
{
x: 81,
y: -20
},
{
x: 82,
y: -28
},
{
x: 83,
y: -4
},
{
x: 84,
y: 15
},
{
x: 85,
y: 20
},
{
x: 86,
y: 26
},
{
x: 87,
y: 26
},
{
x: 88,
y: 24
},
{
x: 89,
y: 34
},
{
x: 90,
y: 35
},
{
x: 91,
y: 30
},
{
x: 92,
y: 22
},
{
x: 93,
y: 12
},
{
x: 94,
y: 15
},
{
x: 95,
y: 18
},
{
x: 96,
y: 24
},
{
x: 97,
y: 18
},
{
x: 98,
y: 26
},
{
x: 99,
y: 25
},
{
x: 100,
y: 13
},
{
x: 101,
y: 2
},
{
x: 102,
y: 1
},
{
x: 103,
y: -10
},
{
x: 104,
y: -10
},
{
x: 105,
y: -4
},
{
x: 106,
y: 8
},
{
x: 107,
y: 15
},
{
x: 108,
y: 15
},
{
x: 109,
y: 15
},
{
x: 110,
y: 15
},
{
x: 111,
y: 18
},
{
x: 112,
y: 19
},
{
x: 113,
y: 3
},
{
x: 114,
y: -12
},
{
x: 115,
y: -14
},
{
x: 116,
y: -10
},
{
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,
y: -10
},
{
x: 125,
y: -6
},
{
x: 126,
y: -8
},
{
x: 127,
y: -31
},
{
x: 128,
y: -52
},
{
x: 129,
y: -57
},
{
x: 130,
y: -40
},
{
x: 131,
y: -20
},
{
x: 132,
y: 7
},
{
x: 133,
y: 14
},
{
x: 134,
y: 10
},
{
x: 135,
y: 6
},
{
x: 136,
y: 12
},
{
x: 137,
y: -5
},
{
x: 138,
y: -2
},
{
x: 139,
y: 9
},
{
x: 140,
y: 23
},
{
x: 141,
y: 36
},
{
x: 142,
y: 52
},
{
x: 143,
y: 61
},
{
x: 144,
y: 56
},
{
x: 145,
y: 48
},
{
x: 146,
y: 48
},
{
x: 147,
y: 38
},
{
x: 148,
y: 29
},
{
x: 149,
y: 33
},
{
x: 150,
y: 20
},
{
x: 151,
y: 1
},
{
x: 152,
y: -7
},
{
x: 153,
y: -9
},
{
x: 154,
y: -4
},
{
x: 155,
y: -12
},
{
x: 156,
y: -3
},
{
x: 157,
y: 5
},
{
x: 158,
y: -3
},
{
x: 159,
y: 12
},
{
x: 160,
y: 6
},
{
x: 161,
y: -10
},
{
x: 162,
y: -2
},
{
x: 163,
y: 15
},
{
x: 164,
y: 17
},
{
x: 165,
y: 21
},
{
x: 166,
y: 22
},
{
x: 167,
y: 15
},
{
x: 168,
y: 16
},
{
x: 169,
y: 1
},
{
x: 170,
y: -2
},
{
x: 171,
y: -9
},
{
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>