Highcharts仪表未显示
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>
但当我添加另一个Gauge时,第一个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>
<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-https://jsfiddle.net/eszygfjb/1/
示例2-https://jsfiddle.net/2cfpL019/
这是因为您将两个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>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- Highcharts仪表未显示
- JQPlot's仪表-以针为单位显示值
- crm 2011使用javascript在仪表板上隐藏和显示子网格
- 仪表D3.js在指针顶部显示值
- Kibana - 用于查找内容并从日志中显示附近记录的仪表板
- 是否可以在剑道UI线性仪表上仅显示最大值/最小值
- 当点击下拉项,它应该显示在仪表板上,并从下拉列表中删除
- Google Analytics API JavaScript在仪表板上向用户显示无需登录的数据
- 如何在Google charts仪表板中运行两个查询并显示两个带有控件的图表
- js简单的仪表板示例-如何编辑显示表
- 调用javascript api,但在仪表板上显示为Places api Web服务
- Highcharts仪表不显示
- 我想添加我的客户的屏幕截图按钮's页面,然后希望将其保存在数据库中,并将其作为仪表板显示在另一个页面中