HighCharts快速生成百万数据点折线图

极端~

已于 2024-06-19 16:16:36 修改

阅读量4.2k

点赞数 2

分类专栏： HighCharts 文章标签： js

于 2021-04-02 11:27:45 首次发布

本文链接：https://blog.csdn.net/han_xiao_xiao/article/details/115393621

版权

HighCharts 专栏收录该内容

2 篇文章

订阅专栏

前端出图一直用的是Echarts，数据量不是很大的时候很好用，但是最近要画出百万数据点的折线图（一条或者n条），本来遇到这种数据量大的按理来说就应该用条件筛选，一部分一部分看，但是不成啊，需求就是想看整体。

Echarts满足不了需求，发现HighCharts结合它的boost插件可以很快速的生成
如效果图：
一条1000000个点
一条折线1000000个点

8条折线，每条2万个点

可以缩放，全屏展示，很方便。
放一个一条的代码：
HTML
所需js
jquery-1.8.3.min.js
highcharts.js
exporting.js
boost.js

<HTML>
<head></head>
<style>
input{
        font-size: 20px;
    }
</style>
<body>
<input type="file" id="files" />
<div id="container" style="width: 100%;height:750px;"></div>
<div id="desc" class="desc"></div>
</body>
<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/boost.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script>
    var n = 0;
    var arr = [];
    var y_total = [];
    var inputElement = document.getElementById("files");
    inputElement.addEventListener("change", handlefiles, false);
    function handlefiles() {
        var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
        var reader = new FileReader();
        reader.readAsText(selectedFile);//读取json文件的内容

        reader.onload = function () {
            let data = JSON.parse(this.result);
			n = data.count;
			y_total = data.result.wave
			for (i = 0; i < n; i = i + 1) {
				arr.push([
					i,
					y_total[i]
				]);
			}
			Highcharts.chart('container', {
				chart: {
					zoomType: 'xy'
				},
				boost: {
					useGPUTranslations: true
				},
				title: {
					text: '测试 ' + n + ' 个点'
				},
				subtitle: {
					text: '测试使用'
				},
				tooltip: {
					valueDecimals: 2
				},
				yAxis: {
					min: -2048,
					max: 2047,
					startOnTick: false
				},
				series: [{
					name: wave_name[i],
					data: arr,
					color: '#C23531',
					lineWidth: 1
				}],
				navigation: {
					buttonOptions: {
						enabled: true
					}
				}
			});
		console.timeEnd('line');
			}
			}

</script>
</HTML>

json格式文件：

{
	"code": 1000,
	"count": 1000000,
	"channels":1,
	"result": {"wave":[这个是100万个数值的数组]}
}

1000000个值太长了，可以写随机数自动生成。

现在多了一个栗子是
一次性可以输多个文件来进行模拟

<html>

<head></head>
<style>
    input {
        font-size: 20px;
    }
</style>

<body>
    <input type="file" id="files" multiple />
    <div id="container" style="width: 100%;height:750px;"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/boost.js"></script>
<script src="js/exporting.js"></script>
<script>
    document.getElementById('files').addEventListener('change', function (e) {
        var files = e.target.files;
        var fileNames = []; // 用于存储文件名的数组
        var seriesData = [];

        // 读取每个文件
        for (var i = 0; i < files.length; i++) {
            fileNames.push(files[i].name); // 将文件名添加到数组中
            (function (fileIndex) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    try {
                        console.log(Array.isArray(files))
                        var yData = []
                        var y_total = new Int16Array(e.target.result)
                        var n = new Blob([e.target.result]).size / 2
                        for (j = 0; j < n; j = j + 1) {
                            yData.push([
                                j,
                                y_total[j]
                            ]);
                        }
                            // 将解析后的数据添加到 seriesData 数组中
                            seriesData.push({
                                name: 'Series ' + (fileIndex + 1)+":"+fileNames[fileIndex], // 可以为每个系列设置名称
                                data: yData
                            });
                            console.log(seriesData.length, files.length)
                        // 当所有文件都读取完毕后，创建或更新图表
                        if (seriesData.length === files.length) {
                            createOrUpdateChart(seriesData, n);
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }
                };

                // 读取文件
                reader.readAsArrayBuffer(files[fileIndex]);
            })(i); // 使用立即执行的函数表达式 (IIFE) 来捕获循环中的索引
        }
    });

    function createOrUpdateChart(seriesData, n) {
        console.log(seriesData)
        Highcharts.chart('container', {
            series: seriesData,
            chart: {
                zoomType: 'xy',
                type: 'line' // 假设你想绘制折线图
            },
            boost: {
                useGPUTranslations: true
            },
            title: {
                text: '测试'+n+'个点'
            },
            subtitle: {
                text: '测试使用'
            },
            tooltip: {
                valueDecimals: 2
            },
            yAxis: {
                min: -2048,
                max: 2047,
                startOnTick: false
            }, navigation: {
                buttonOptions: {
                    enabled: true
                }
            }
        });
    }
</script>

</html>

在这里插入图片描述