Question

我正在使用Highcharts自动绘制一个从传感器输出的数组，并且每隔一秒左右更新一次。该数组的长度为x个元素。这个特殊的传感器测量某些x和min波长之间max步的光强度（也就是说，它以(max-min)/x的增量测量强度 - 在我的情况下，这个增量不是整数）。我还有一个静态数据集，它绘制在相同的轴上，具有相同的x轴要求。

我能够动态地成功绘制这些数据，但x轴刻度是错误的。 Highcharts默认范围为min到max，而不是min到min+x。我想改变x轴增量，以便缩放正确。

是否可以定义min，max和number of data points或step来生成x轴？或者有没有办法将x轴和y轴值定义为相互绘制的单个数组？还有其他方法吗？我已经做了很多搜索和实验但是做得很短。

我的代码的相关片段如下。

function showData(result) { // 'result' is an array that comes from the sensor
    var numbers = int(split(resultString, ","));
    chart.series[1].setData(numbers);
    socket.send('a'); // send a byte to tell it to start sending new data
    loop++; //increase loop every time the server receives data
    chart.setTitle({ text: 'Spectrum, reading #' + loop });
} //showData

$(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area',
            load: function() {
                chart = this;
                showData();
            }
        },
        title: {
            text: 'Spectrum, reading 0'
        },
        xAxis: {
            title: {
                text: 'Wavelength [nm]',
                allowDecimals: false,
            },
        },
        yAxis: {
            title: {
                text: ''
            },
        },
        tooltip: {
            pointFormat: '{point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 340,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '404 nm laser spectrum',
            data: [130,130,114,113,113,116,112,111,112,112,115,113,113,115,
                112,114,113,113,114,115,113,114,113,114,115,115,117,119,124,
                136,145,164,190,217,252,363,482,491,417,285,188,156,140,132,
                127,122,117,118,117,115,116,115,116,118,116,116,117,116,117,
                116,113,117,114,113,115,112,116,114,114,116,114,114,116,113,
                116,115,114,115,115,114,115,115,115,116,114,115,116,114,118,
                114,116,116,115,118,114,113,117,113,116,116,115,116,115,115,
                115,114,117,116,117,118,120,118,122,119,128,127,130,134,136,
                138,140,137,139,134,136,134,132,133,134,131,132,130,130,131,
                128,128,131,129,131,131,134,136,134,140,139,137,143,140,138,
                141,136,134,132,127,126,126,123,123,118,119,122,118,120,117,
                116,118,116,118,116,115,117,116,115,116,115,115,116,114,119,
                113,114,116,115,116,114,114,116,116,113,117,116,114,118,112,
                115,114,113,116,115,114,115,113,116,114,114,116,115,115,114,
                112,114,114,113,114,115,113,117,114,115,112,114,114,113,115,
                114,114,115,113,112,115,112,113,115,112,116,113,113,115,116,
                113,116,113,115,113,114,115,115,114,116,114,116,113,116,117,
                113,115,116,115,117,115,114,117,113,115,118,114,116,115,115,
                116,114,113,116,114,117,115,114,117,115,114,115,116,116,116,
                117,117,114,0],
                color: '#36D39F'
            }, {
                name: 'Current measured spectrum',
                data: numbers,
                color: '#4A235A'
            }]
        });
    });

编辑：这是一个演示我当前如何运作的演示：https://jsfiddle.net/bgzgc1d9/2/。 x轴的范围应为340到850，在此间隔内均匀分布288个数据点

Highcharts：如何为动态图表定义x轴

0 个答案: