Javascript Highcharts JS问题-在JSFIDLE中运行良好
这是一个使用Highcharts的项目符号样式图表 当我把它复制给Dreamweaver时，我无法让它为我的生活工作。当我在浏览器中加载时，我会看到一个空白页面。其他Highchart图表加载良好 有什么帮助吗Javascript Highcharts JS问题-在JSFIDLE中运行良好,javascript,highcharts,Javascript,Highcharts,这是一个使用Highcharts的项目符号样式图表 当我把它复制给Dreamweaver时，我无法让它为我的生活工作。当我在浏览器中加载时，我会看到一个空白页面。其他Highchart图表加载良好 有什么帮助吗 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
.body {
font-family:helvetica, sans-serif;
font-size:.7em;
}
.p {
margin:.5em 1em;
}
</style>
<script type+"text/javascript">
Highcharts.Renderer.prototype.symbols.line = function (x, y, width, height) {
return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
};
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
borderWidth: 0,
borderColor: '#eee',
margin: [0, 0, 20, 100]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
tickLength: 0,
tickColor: '#eee',
gridLineWidth: 0,
gridLineColor: '#eee',
labels: {
style: {
fontWeight: 'bold'
}
},
lineColor: '#eee',
lineWidth: 0,
categories: ['Measure 1', 'Measure 2', 'Measure 3', 'Measure 4', 'Measure 5']
},
yAxis: {
tickInterval: 2,
allowDecimals: false,
tickColor: '#ccc',
tickWidth: 0,
tickLength: 3,
lineColor: '#eee',
lineWidth: 0,
gridLineWidth: 0,
gridLineColor: 'rgba(255,255,255,.15)',
endOnTick: true,
title: {
text: ''
},
//gridZIndex:4,
min: -0.5,
max: 11.75,
endOnTick: false,
startOnTick: false,
plotLines: [{
value: 10.5,
width: 0,
color: '#eee'
}],
labels: {
y: 10,
style: {
fontSize: '10px'
},
formatter: function () {
if (this.value) {
return '$' + this.value + 'M';
} else {
return this.value;
}
}
}
},
tooltip: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, .85)',
borderWidth: 0,
shadow: true,
style: {
fontSize: '10px',
padding: 2
},
formatter: function () {
return this.series.name + ": <strong>" + "$" + Highcharts.numberFormat(this.y, 2) + "M" + "</strong>";
}
},
plotOptions: {
bar: {
grouping: false,
shadow: false,
borderWidth: 0,
pointPadding: .25,
groupPadding: 0
},
scatter: {
marker: {
symbol: 'line',
lineWidth: 3,
radius: 9,
lineColor: '#333'
}
}
},
series: [{
name: 'Bands 3',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.1)',
data: [2, 1.5, 1.5, 1.5, 2]
}, {
name: 'Bands 2',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.4)',
data: [2, 1.5, 1.5, 2, 3]
}, {
//pointRange:1.1,
name: 'Bands 1',
enableMouseTracking: false,
borderWidth: 0,
borderRadius: 0,
stacking: 'normal',
grouping: false,
color: 'rgba(156,156,156,.7)',
data: [6, 7, 7, 6.5, 5]
}, {
name: 'Measure',
color: 'rgba(56,56,56,1)',
pointRange: .5,
zIndex: 10,
data: [7, 5, 9, 3, 6]
}, {
name: 'Target',
type: 'scatter',
zIndex: 20,
data: [7.5, 8, 7.5, 8.5, 8.5]
}]
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:350px;width:400px;margin:1em;"></div>
</body>
</html>
海图示例
.身体{
字体系列：helvetica，无衬线；
字体大小：.7em；
}
p{
边缘：.5em 1米；
}
Highcharts.Renderer.prototype.symbols.line=函数（x、y、宽度、高度）{
返回['M'，x，y+宽度/2，'L'，x+高度，y+宽度/2]；
};
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：'bar'，
边框宽度：0，
边框颜色：“#eee”，
保证金：[0,0,20,100]
},
学分：{
已启用：false
},
出口：{
已启用：false
},
标题：{
文本：“”
},
图例：{
已启用：false
},
xAxis：{
长度：0，
勾选颜色：“#eee”，
网格线宽：0，
gridLineColor:“#eee”，
标签：{
风格：{
fontWeight:“粗体”
}
},
线条颜色：“#eee”，
线宽：0，
类别：[‘措施1’、‘措施2’、‘措施3’、‘措施4’、‘措施5’]
},
亚克斯：{
时间间隔：2，
allowDecimals:false，
勾选颜色：“#ccc”，
宽度：0，
长度：3，
线条颜色：“#eee”，
线宽：0，
网格线宽：0，
gridLineColor:'rgba（255255255，.15）'，
恩东蒂克：是的，
标题：{
文本：“”
},
//gridZIndex:4，
最小值：-0.5，
最高：11.75，
恩东蒂克：错，
startOnTick：错，
绘图线：[{
数值：10.5，
宽度：0，
颜色：“#eee”
}],
标签：{
y:10，
风格：{
字体大小：“10px”
},
格式化程序：函数（）{
if（该值）{
返回“$”+this.value+“M”；
}否则{
返回此.value；
}
}
}
},
工具提示：{
启用：对，
背景颜色：“rgba（255、255、255、85）”，
边框宽度：0，
影子：没错，
风格：{
fontSize:'10px'，
填充：2
},
格式化程序：函数（）{
返回this.series.name+“：”+“$”+Highcharts.numberFormat（this.y，2）+“M”+“”；
}
},
打印选项：{
酒吧：{
分组：false，
影子：错，
边框宽度：0，
点填充：.25，
分组填充：0
},
散布：{
标记：{
符号：'行'，
线宽：3，
半径：9，
线条颜色：“#333”
}
}
},
系列：[{
名称：“第3组”，
enableMouseTracking:false，
边框宽度：0，
边界半径：0，
堆叠：“正常”，
分组：false，
颜色：“rgba（156156156，.1）”，
数据：[2,1.5,1.5,1.5,2]
}, {
名称：'Bands 2'，
enableMouseTracking:false，
边框宽度：0，
边界半径：0，
堆叠：“正常”，
分组：false，
颜色：“rgba（156156156，.4）”，
数据：[2,1.5,1.5,2,3]
}, {
//点范围：1.1，
名称：'Bands 1'，
enableMouseTracking:false，
边框宽度：0，
边界半径：0，
堆叠：“正常”，
分组：false，
颜色：“rgba（156156156，.7）”，
数据：[6,7,7,6.5,5]
}, {
名称：'度量'，
颜色：“rgba（56,56,56,1）”，
点范围：.5，
zIndex:10，
数据：[7,5,9,3,6]
}, {
名称：“目标”，
键入：“散布”，
zIndex:20，
数据：[7.5,8,7.5,8.5,8.5]
}]
});