我是使用HighCharts的新手。
我有一个问题，当我在页面上有多个时，第一个Gauge会消失。
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
HighChart test
</title>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
<script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>
</head>
<body style="background-color: lightgrey">
<form runat="server">
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
</form>
<script>
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.3, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.8, '#55BF3B'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The 1 gauge
$('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 1',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// Bring to life
setInterval(function () {
setValue('#gauge1');
}, 2000);
function setValue(div) {
var chart = $(div).highcharts(), point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}
}
});
</script>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
HighChart test
</title>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
<script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>
</head>
<body style="background-color: lightgrey">
<form runat="server">
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
</form>
<script>
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.3, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.8, '#55BF3B'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The 1 gauge
$('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 1',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// The 2 gauge
$('#gauge2').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 2'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 2',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// Bring to life
setInterval(function () {
setValue('#gauge1');
setValue('#gauge2');
}, 2000);
function setValue(div) {
var chart = $(div).highcharts(), point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}
}
});
</script>
</body>
</html>
任何人都知道我做错了什么。
以下是JSFiddle的链接
答案 0 :(得分：4)
因为你将两个div元素的data-highcharts-chart - 属性设置为相同的值。据我所知，Highcharts在内部使用它来确定您可以访问Highcharts.charts-Array中各个图表的顺序。
通过将它们设置为索引零，您在创建第二个图表时基本上会覆盖第一个图表的对象实例。只需删除这些属性，两个仪表都可以正常显示。
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>