高圖儀表未顯示
[英]Highcharts gauge not shown
問題描述
我是使用HighCharts的新手。
我有一個問題，當頁面上有多個儀表時，第一個儀表會消失。
這個例子很好用：
<%@ 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的鏈接
1 個解決方案
解決方案1
4 已采納 2016-05-18 09:40:58
這是因為您將兩個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>
Highcharts Gauge
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.