highcharts绘制图表速率
我使用了js接收数据，并用highcharts绘制折线图，每组1万多个点更新一次，有48组，打印输出是显示图表更新了48次，但是图表上肉眼看起来有卡顿，可能就更新了几次。请问各位怎样设置数据能解决，感谢！
在处理大量的数据并绘制图表时，确实可能会遇到性能问题。以下是一些可能的解决方案：
- 1.数据压缩：如果可能的话，将数据压缩到最小。例如，如果你知道数据的趋势，可以只发送偏离趋势的变化。或者，你可以通过一些数学算法（如差分或哈希）来减少数据的的大小。
- 2.数据分组：将数据分组，然后一次渲染一组。例如，你可以将每1000个数据点作为一个数据块，然后一次渲染一个块。
- 3.使用'low'数据：如果你知道数据的大部分值都在一个较低的范围内，那么可以使用'low'数据来提高性能。这样，Highcharts会只渲染那些超出'low'范围的数据。
- 4.延迟渲染：如果数据是动态的，那么可以考虑只在用户需要看到时才进行渲染。例如，你可以设置一个500毫秒的定时器，只在数据变化时进行渲染。
- 5.使用'turbo'模式：在某些情况下，'turbo'模式可能会提高性能。该模式会减少渲染的细节，虽然在某些情况下可能会影响图表的质量，但在你的情况下，可能会有所帮助。
- 6.使用SVG而不是Canvas：如果可能的话，使用SVG渲染而不是Canvas。SVG是矢量图形，可以按比例缩小或放大而不失去质量，而Canvas是基于像素的，放大后可能会失真。
- 7.优化硬件：如果以上策略都不能解决问题，那么可能需要优化你的硬件。例如，你可能需要一个更强大的CPU或更多的内存。
希望这些建议能对你有所帮助！
不知道你这个问题是否已经解决, 如果还没有解决的话:- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/922447
- 这篇博客你也可以参考下：Highcharts 柱形图显示数值并设置数值格式
- 除此之外, 这篇博客: 设置highcharts x轴间隔中的 设置highcharts x轴间隔 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
var series_1 = [12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,12, 34, 23, 35, 47, 12, 34, 23, 35, 47, 12, 34, 23, 35, 47,12, 34, 23, 35, 47,]; // 设置x轴间隔（当不同数据时，间隔也不同）x轴最多为10位 var minTickInterval_1 = (series_1.length/10).toFixed(0); var chart = Highcharts.chart('container', { credits: { enabled: false // 禁用版权信息 }, // 标题 title: { useHTML: true, text: '<span style="font-weight: 700">CPU利用率<span style="color: #eaeaea">（%）</span></span>', align: 'left', // 水平对齐方式 style: { fontSize: '12px', 'font-weight': 700 } }, // 副标题 subtitle: { text: '' }, // X轴 xAxis: { title: { text: '' }, // 数据项 categories: [ '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', '11:06:23', '12:06:23', '13:06:23', '13:06:34', '13:07:23', '14:06:34', '15:06:23', '16:06:34', '17:06:23', '18:06:23', ], // 间隔配置参数 minTickInterval: minTickInterval_1 }, // Y轴 yAxis: { title: { text: '' } }, // 数据列 series: [{ name: "CPU利用率", color: '#2d8cf0', data: series_1, // 线宽 lineWidth: 1, cursor: 'pointer', // 鼠标样式 dashStyle: 'Solid', // 线条样式 type: 'spline', // 线条平滑为曲线 }], // 数据列配置 每条折现以不同图标显示（三角形、圆形等） 折现数据上的数据点 plotOptions: { series: { marker: { radius: 2, // 大小 enabled: true, // 为true时，自定义显示 下方label无效 states: { // 状态 hover: { radius: 5, lineWidthPlus: 1 } } }, // 使用label需去除marke属性 // label: { // connectorAllowed: true // } // pointStart: 2010 // 如果没有为数据列中提供x值，则pointStart定义要开始的值。 } }, // 图例（折线数据名字） legend: { itemStyle: { fontWeight: 400 } }, tooltip: { shared: true, // 鼠标滑过是否显示全部数据 crosshairs: false, // true：鼠标滑过，为长方形背景 // 配置鼠标划过时标示线 crosshairs: [ // 横向标示线 { width: 1, color: '#ccc' }, ] }, // 响应式 // responsive: { // rules: [{ // // 响应条件 // condition: { // }, // // 图表配置 // chartOptions: { // } // }] // } });
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^