如何基于.NET Core 2.0 WebSocket为Highstock(Highcharts)绑定实时数据并动态绘制

当然可以实现！问题的核心是Highstock在series完全为空的情况下不会渲染图表容器，但我们可以通过初始化一个空的series结构，再配合WebSocket实时推送数据来动态更新图表。下面是具体的实现步骤：

1. 初始化Highstock图表（无默认数据） #

首先，初始化图表时，给series传入一个空数组，同时确保图表的基本配置（比如坐标轴、标题）都正确设置，这样即使没有初始数据，图表框架也会显示出来：

// 初始化Highstock图表
const chart = Highcharts.stockChart('container', {
    title: {
        text: '实时WebSocket数据'
    },
    xAxis: {
        type: 'datetime', // 用时间戳作为X轴
        title: {
            text: '时间'
        }
    },
    yAxis: {
        title: {
            text: '数据值'
        }
    },
    series: [{
        name: '实时数据',
        data: [] // 空数组初始化，不要省略这个
    }]
});

2. 建立WebSocket连接并接收数据 #

接下来，连接你的.NET Core WebSocket服务，每次收到新数据时，调用Highstock的addPoint方法将数据添加到series中。注意要把数据转换成Highstock需要的格式（[时间戳, 值]的数组）：

// 建立WebSocket连接
const ws = new WebSocket('ws://localhost:5000/your-websocket-endpoint');

ws.onmessage = function(event) {
    // 解析从.NET Core传来的数据（假设是JSON格式）
    const data = JSON.parse(event.data);
    
    // 转换为Highstock需要的格式：[时间戳, 数值]
    // 如果你的数据里没有时间戳，可以用当前时间new Date().getTime()
    const point = [data.timestamp || new Date().getTime(), data.value];
    
    // 添加数据点到图表，配置shift:true可以移除最早的旧数据，保持图表长度
    chart.series[0].addPoint(point, true, true);
};

// 处理连接关闭和错误
ws.onclose = function() {
    console.log('WebSocket连接关闭');
};

ws.onerror = function(error) {
    console.error('WebSocket错误:', error);
};

3. .NET Core WebSocket端的注意事项 #

确保你的.NET Core服务推送的数据格式是前端能解析的JSON，比如：

// .NET Core中发送数据的示例（伪代码）
var data = new {
    timestamp = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds(),
    value = // 你的实时数据值
};
var json = JsonSerializer.Serialize(data);
await webSocket.SendAsync(
    Encoding.UTF8.GetBytes(json),
    WebSocketMessageType.Text,
    endOfMessage: true,
    cancellationToken: CancellationToken.None);

关键要点 #

• 不要省略series中的data: []，空数组是让Highstock渲染图表框架的关键，完全移除data属性才会导致图表消失。
• 使用addPoint方法时，第二个参数redraw设为true会自动重绘图表，第三个参数shift设为true可以保持图表只显示最近的N个数据点（默认是移除最早的点）。
• 确保时间戳是毫秒级的（Highstock默认使用Unix毫秒时间戳），如果用秒级的话需要乘以1000。

这样配置后，即使没有初始默认数据，图表框架也会先显示出来，一旦WebSocket推送数据，就会实时绘制到图表上了。

内容的提问来源于stack exchange，提问作者Mohammad Taherian