使用csv文件创建两个独立的Y轴海图图形
下面的示例是一个电池数据记录器，它读取一个csv文件，每个时间值有多个数据值，并将其绘制成图形 如你们所见，我用左Y轴读取电压，但我想添加另一个独立的右Y轴读取电流，例如 在我的示例中，右Y轴只是标题，当前，但与左Y轴具有相同的比例。我要这个Y轴独立 我看过这个例子，但我不知道如何适应它，因为我没有使用级数。有人能帮我吗？提前谢谢 csv数据格式为： timeStr、Bat1、Bat2、Bat3、Bat4、Ibat 1438420746,13.60,13.80,13.60,11.80,5.5 1438420807,13.60,13.69,13.0,11.19,5.7 这是完整的代码：使用csv文件创建两个独立的Y轴海图图形,csv,highcharts,axes,Csv,Highcharts,Axes,下面的示例是一个电池数据记录器，它读取一个csv文件，每个时间值有多个数据值，并将其绘制成图形 如你们所见，我用左Y轴读取电压，但我想添加另一个独立的右Y轴读取电流，例如 在我的示例中，右Y轴只是标题，当前，但与左Y轴具有相同的比例。我要这个Y轴独立 我看过这个例子，但我不知道如何适应它，因为我没有使用级数。有人能帮我吗？提前谢谢 csv数据格式为： timeStr、Bat1、Bat2、Bat3、Bat4、Ibat 1438420746,13.60,13.80,13.60,11.80,5.5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Battery Data Logger</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function getDataFilename(str){
point = str.lastIndexOf("file=")+4;
tempString = str.substring(point+1,str.length)
if (tempString.indexOf("&") == -1){
return(tempString);
}
else{
return tempString.substring(0,tempString.indexOf("&"));
}
}
query = window.location.search;
var dataFilePath = "data/"+getDataFilename(query);
$(function () {
// Get the CSV and create the chart
$.get(dataFilePath, function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
chart: {
// renderTo: 'container',
zoomType: 'xy',
panning: true,
panKey: 'shift',
marginTop: 100,
// spacingRight: 20
},
title: {
text: 'Battery Data Logger MB-40'
},
subtitle: {
text: 'Click and drag in the plot area to zoom in. Hold down shift key to pan.'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M - %b %e', parseInt(this.value, 10)*1000);
}
}
},
yAxis: [{ // left y axis
title: {
text: "Voltage (V)"
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: "Current (A)"
},
labels: {
align: 'right',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 1);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 40,
floating: true,
borderWidth: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x*1000) +': '+ this.y;
}
},
exporting: {
sourceWidth: 600,
sourceHeight: 400,
scale: 1,
chartOptions: {
subtitle: "Battery Data Logger"
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x*1000) +':<br/> '+
this.y,
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
});
var i = 1;
});
});
</script>
</head>
<body>
<p style="text-align:center;">Please allow the chart to load, it may take up to 30 seconds </p>
<hr/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/highcharts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/modules/data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
电池数据记录器
函数getDataFilename（str）{
point=str.lastIndexOf（“file=”）+4；
tempString=str.substring（点+1，str.length）
if（tempString.indexOf（“&”）=-1）{
返回（tempString）；
}
否则{
返回tempString.substring（0，tempString.indexOf（“&”）；
}
}
query=window.location.search；
var dataFilePath=“data/”+getDataFilename（查询）；
$（函数（）{
//获取CSV并创建图表
$.get（数据文件路径，函数（csv）{
$（“#容器”）。高图({
数据：{
csv:csv
},
图表：{
//renderTo:'容器'，
zoomType:'xy'，
平移：是的，
平移键：“shift”，
玛金托普：100，
//spacingRight:20
},
标题：{
文本：“电池数据记录器MB-40”
},
副标题:{
文本：“在绘图区域中单击并拖动可放大。按住shift键可平移。”
},
xAxis：{
键入：“日期时间”，
标签：{
格式化程序：函数（）{
返回Highcharts.dateFormat（“%H:%M-%b%e”，parseInt（this.value，10）*1000）；
}
}
},
yAxis:[{//左y轴
标题：{
文字：“电压（V）”
},
标签：{
对齐：“左”，
x:3，
y:16，
格式化程序：函数（）{
返回Highcharts.numberFormat（this.value，1）；
}
},
showFirstLabel:错误
}，{//右y轴
链接到：0，
网格线宽：0，
相反：是的，
标题：{
正文：“当前（A）”
},
标签：{
对齐：“右”，
x:3，
y:16，
格式化程序：函数（）{
返回Highcharts.numberFormat（this.value，1）；
}
},
showFirstLabel:错误
}],
图例：{
对齐：“左”，
垂直排列：“顶部”，
y:40，
浮动：是的，
边框宽度：0
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%H:%M-%b%e，%Y'，this.x*1000）+'：'+this.Y；
}
},
出口：{
震源宽度：600，
资料来源高度：400，
比例：1，
图表选项：{
字幕：“电池数据记录器”
}
},
打印选项：{
系列：{
光标：“指针”，
要点：{
活动：{
单击：函数（）{
hs.htmlExpand（空{
页面来源：{
x:this.pageX，
y:这个，佩吉
},
headingText:this.series.name，
maincontentText:Highcharts.dateFormat（“%H:%M-%b%e，%Y'，this.x*1000）+'：
+
这个,嗯,，
宽度：200
});
}
}
},
标记：{
线宽：1
}
}
},
});
var i=1；
});
});
请允许加载图表，最多可能需要30秒
function(chart){
chart.series[2].update({ //2 is index of serie
yAxis:1
});
}