Highchart Single Legend控制多个图表
我使用高图表来显示数据。目前我有一个图表显示montly，annual，week数据，另一个图表显示24小时。我想要的是有一个控制两个图表的图例。在谷歌搜索解决方案时，我发现这个http://jsfiddle.net/teEQ3/似乎有效，但由于我对javascript很天真，我可以弄清楚如何在我的运行脚本中实现这段代码。
这是我的chart1
的javascript代码<script type="text/javascript">
$(document).ready(function() {
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
var options = {
chart: {
renderTo: 'mylineChart',
defaultSeriesType: 'line',
spacingLeft : 60,
zoomType: 'x'
},
title: {
text: 'TPV Line Chart Data',
x: -20 //center
},
rangeSelector:{
enabled:true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
count: 1,
text: 'all'
}],
spacingBottom: 40
},
subtitle: {
text: '',
x: -20
},
xAxis: {
gridLineWidth: 0,
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
}
},
credits: {
enabled: false
},
yAxis: [<?php echo join($ylabel, ',') ?>],
tooltip: {
shared: true
},
legend: {
color: 'white',
layout: 'vertical',
align: 'left',
x: -60,
itemHiddenStyle: {
color: "#777"
},
verticalAlign: 'top',
y: 5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: 'Download',
theme: {
fill: '#eee',
stroke: '#fff',
states: {
hover: {
fill: '#fff',
stroke: '#eee'
},
select: {
fill: '#ddd',
stroke: '#0f0'
}
}
},
_titleKey: 'contextButtonTitle',
// Use only the download related menu items from the default context button
menuItems:buttons.slice(2)
},
printButton: {
text: 'Print',
theme: {
fill: '#eee',
stroke: '#fff',
states: {
hover: {
fill: '#fff',
stroke: '#eee'
},
select: {
fill: '#ddd',
stroke: '#0f0'
}
}
},
_titleKey: 'printChart',
onclick: function () {
this.print();
}
}
}
},
series: [<?php echo join($arr, ',') ?>],
}
<?php
$i = 0 ;
$check_temperature = "SELECT * FROM temperature_setting WHERE device_key = '".$session_row['device_key']."'";
$ans = $conn->query($check_temperature);
while($check = $ans->fetch_assoc()){
$check_temp_id = $check['temp_id'];
$check_is_active = $check['is_active'];
for ($j = 1; $j <=15; $j++){
if($check_temp_id == 'temp'.$j.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/tempdata<?php echo $j; ?>.php');
<?php }
}
}
$check_pulse = "SELECT * FROM pulse_setting WHERE device_key = '".$session_row['device_key']."'";
$ans2 = $conn->query($check_pulse);
while($check2 = $ans2->fetch_assoc()){
$check_pulse_id = $check2['pulse_id'];
$check_is_active = $check2['is_active'];
for ($k = 1; $k <=8; $k++){
if($check_pulse_id == 'pulse'.$k.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/pulsedata<?php echo $k; ?>.php');
<?php }
}
}
$check_volt = "SELECT * FROM volt_setting WHERE device_key = '".$session_row['device_key']."'";
$ans3 = $conn->query($check_volt);
while($check3 = $ans3->fetch_assoc()){
$check_volt_id = $check3['volt_id'];
$check_is_active = $check3['is_active'];
for ($v = 1; $v <=4; $v++){
if($check_volt_id == 'volt'.$v.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/voltdata<?php echo $v; ?>.php');
<?php }
}
}
?>
function myfunction(ind, some_file) {
jQuery.get(some_file, null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC');
traffic.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
});
} catch (e) { }
options.series[ind].data = traffic;
chart = new Highcharts.Chart(options);
});
}
});
</script>
图表2
<script type="text/javascript">
var mychart;
$(document).ready(function() {
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
var options = {
chart: {
renderTo: 'box',
defaultSeriesType: 'line',
spacingLeft : 60,
zoomType: 'x'
}, title: {
text: 'TPV Line Chart Data',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000, // one hour
tickWidth: 0,
gridLineWidth: 0,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%l%p', this.value);
}
}
},
credits: {
enabled: false
},
yAxis: [<?php echo join($ylabel, ',') ?>],
legend: {
color: 'white',
layout: 'vertical',
align: 'left',
x: -60,
itemHiddenStyle: {
color: "#777"
},
verticalAlign: 'top',
y: 5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},/*
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var XYZ = $('#mylineChart').highcharts(),
series = XYZ.get(this.options.id); //get corresponding series
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
}
}
}
},
*/
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: 'Download',
theme: {
fill: '#eee',
stroke: '#fff',
states: {
hover: {
fill: '#fff',
stroke: '#eee'
},
select: {
fill: '#ddd',
stroke: '#0f0'
}
}
},
_titleKey: 'contextButtonTitle',
// Use only the download related menu items from the default context button
menuItems:buttons.slice(2)
},
printButton: {
text: 'Print',
theme: {
fill: '#eee',
stroke: '#fff',
states: {
hover: {
fill: '#fff',
stroke: '#eee'
},
select: {
fill: '#ddd',
stroke: '#0f0'
}
}
},
_titleKey: 'printChart',
onclick: function () {
this.print();
}
}
}
},
series: [<?php echo join($arr, ',') ?>],
}
<?php
$i = 0 ;
$check_temperature = "SELECT * FROM temperature_setting WHERE device_key = '".$session_row['device_key']."'";
$ans = $conn->query($check_temperature);
while($check = $ans->fetch_assoc()){
$check_temp_id = $check['temp_id'];
$check_is_active = $check['is_active'];
for ($j = 1; $j <=15; $j++){
if($check_temp_id == 'temp'.$j.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/hourly_tempdata<?php echo $j; ?>.php');
<?php }
}
}
$check_pulse = "SELECT * FROM pulse_setting WHERE device_key = '".$session_row['device_key']."'";
$ans2 = $conn->query($check_pulse);
while($check2 = $ans2->fetch_assoc()){
$check_pulse_id = $check2['pulse_id'];
$check_is_active = $check2['is_active'];
for ($k = 1; $k <=8; $k++){
if($check_pulse_id == 'pulse'.$k.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/hourly_pulsedata<?php echo $k; ?>.php');
<?php }
}
}
$check_volt = "SELECT * FROM volt_setting WHERE device_key = '".$session_row['device_key']."'";
$ans3 = $conn->query($check_volt);
while($check3 = $ans3->fetch_assoc()){
$check_volt_id = $check3['volt_id'];
$check_is_active = $check3['is_active'];
for ($v = 1; $v <=4; $v++){
if($check_volt_id == 'volt'.$v.'' && $check_is_active == 1){
?>
myfunction(<?php echo $i++; ?>, 'lineData/hourly_voltdata<?php echo $v; ?>.php');
<?php }
}
}
?>
function myfunction(ind, some_file) {
jQuery.get(some_file, null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC');
traffic.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
});
} catch (e) { }
options.series[ind].data = traffic;
chart = new Highcharts.Chart(options);
});
}
});
</script>
这就是我目前的情况
1 个答案:
答案 0 :(得分：2)
如果您正在阅读API文档，那将非常简单。 您所要做的就是使系列ID与其他图表相同，并让第二个图表图例处理控件。见下文：
$(function () {
$('#container1').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
enabled: false
},
series: [{
id: 'someId',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
id: 'someId_',
data: [30.0, 51.5, 206.4, 529.2, 44.0, 76.0, 335.6, 148.5, 216.4, 294.1, 92.6, 60.2]
}]
});
$('#container2').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var XYZ = $('#container1').highcharts(),
series = XYZ.get(this.options.id); //get corresponding series
if (series) {
if (this.visible) {
series.hide();
} else {
series.show();
}
}
}
}
}
},
series: [{
id: 'someId',
name: 'Series 1',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
id: 'someId_',
name: 'Series 2',
data: [30.0, 51.5, 206.4, 529.2, 44.0, 76.0, 335.6, 148.5, 216.4, 294.1, 92.6, 60.2]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？