使用HIghchart.js和socket.io绘制动态混合条形图和折线图以获取实时数据
[英]Drawing a dynamic Mixed Bar and Line chart with HIghchart.js with socket.io for live data
问题描述
I am trying to draw a dynamic, mixed bar and line graph using Highchart.js. 
我正在尝试使用Highchart.js绘制动态的混合条形图和折线图。 I am getting live data to my webpage using socket.io (I'm using Flask as my webserver so using Flask-socketIO). 我正在使用socket.io将实时数据获取到我的网页（我使用Flask作为我的Web服务器，所以使用Flask-socketIO）。
I am able to print the data coming to my webpage using console.log, but I am missing something for which it is not rendered in the chart. 我可以使用console.log打印进入我的网页的数据，但是我缺少图表中未呈现的数据。
I am trying to add xAxis as well as both the Series value. 我试图添加xAxis以及两个Series值。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link href="../static/css/authz.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var myChart = Highcharts.chart('containerX', {
chart: {
zoomType: 'xy',
events: {
load: function () {
// set up the updating of the chart on each sample
var categories = this.xAxis[0].categories;
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var series1 = this.series[0]
var series2 = this.series[1]
socket.on('my_response_data', function (sample) {
//add chart data to series
var x = sample.logTime
var y = sample.logDuration
var z = sample.totalSession
console.log( x + " " + y + " " + z) //Printing properly to console e.g 2018-01-25T03:58:35.781 3 211
categories.push(sample.logTime)
series1.addPoint(y, false, true);
series2.addPoint(z, false, true);
myChart.redraw();
});
}
},
},
title: {
text: 'Sacred Tests'
},
subtitle: {
text: 'Source: My Secret Source'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Sessions',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Sessions',
type: 'column',
yAxis: 1,
data: [],
tooltip: {
valueSuffix: ''
}
}, {
name: 'Duration',
type: 'spline',
data: [],
tooltip: {
valueSuffix: 'ms'
}
}]
});
});
</script>
</head>
<body>
<div id="containerX" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
1 个解决方案
解决方案1
0 已采纳 2018-01-25 12:42:49
It's a problem with displaying only one point at a time with addPoint(point, redraw, shift, animation) and setting shift=true . 使用addPoint(point, redraw, shift, animation)一次只显示一个点并设置shift=true 。 That will remove previous point and chart will look empty. 这将删除先前的点，并且图表将显示为空。
Simple solution is to use: 简单的解决方案是使用：
series1.addPoint(y, false, false, false);
series2.addPoint(z, false, false, false);
myChart.redraw();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.