[英]Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
I took my exact code from Jsfiddle and added it to the code on my server. 我从Jsfiddle取得了确切的代码,并将其添加到服务器上的代码中。 The graph plots but it formats in a strange way. 该图可以绘制,但格式却很奇怪。 There are no console errors. 没有控制台错误。
Here's an image showing how the chart appears on my website: Image 下面是显示在图表的显示在我的网站的图片: 图片
And here's the JSfiddle (the way it SHOULD look): http://jsfiddle.net/smq59yf9/33/ 这是JSfiddle(看起来应该是这样): http : //jsfiddle.net/smq59yf9/33/
CODE: 码:
HTML 的HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="ContainerGraph1" style="width: 500px; height: 400px; margin: 0 auto"></div>
JAVASCRIPT JAVASCRIPT
Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (proceed, lineWidth) {
var axis = this,
path = proceed.call(this, lineWidth),
x = path[1],
y = path[2];
Highcharts.each(this.breakArray || [], function (brk) {
if (axis.horiz) {
x = axis.toPixels(brk.from);
path.splice(3, 0,
'L', x - 4, y, // stop
'M', x - 9, y + 5, 'L', x + 1, y - 5, // left slanted line
'M', x - 1, y + 5, 'L', x + 9, y - 5, // higher slanted line
'M', x + 4, y
);
} else {
y = axis.toPixels(brk.from);
path.splice(3, 0,
'L', x, y - 4, // stop
'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
'M', x, y + 4
);
}
});
return path;
});
/**
* On top of each column, draw a zigzag line where the axis break is.
*/
function pointBreakColumn(e) {
var point = e.point,
brk = e.brk,
shapeArgs = point.shapeArgs,
x = shapeArgs.x,
y = this.translate(brk.from, 0, 1, 0, 1),
w = shapeArgs.width,
key = ['brk', brk.from, brk.to],
path = ['M', x, y, 'L', x + w * 0.25, y + 4, 'L', x + w * 0.75, y - 4, 'L', x + w, y];
if (!point[key]) {
point[key] = this.chart.renderer.path(path)
.attr({
'stroke-width': 2,
stroke: point.series.options.borderColor
})
.add(point.graphic.parentGroup);
} else {
point[key].attr({
d: path
});
}
}
Highcharts.chart('ContainerGraph1', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
lineColor: 'black',
lineWidth: 2,
title: {
text: 'Temperature (°C)'
}
},
yAxis: {
lineColor: 'black',
lineWidth: 2,
breaks: [{
from: 1, //adds break
to: 3
}],
title: {
text: 'Temperature (°C)'
}
},
credits: {
enabled: false
},
exporting: { enabled: false },
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: false
}
},
legend: {
enabled: false // hides legend
},
series: [{
name: 'Tokyo',
color: '#000000',
data: [[1999,7],[2000,8], [2001,10], [2002,12], [2003,27] ]
}, {
name: 'London',
data: [[1999,6]], // include if want to keep break
color: '#ffffff'
}]
});
If anyone has any idea as to why it would format this way, I would greatly appreciate it. 如果有人对为什么采用这种格式有任何想法,我将不胜感激。 Thanks! 谢谢!
经常检查CSS ...我在代码的其他地方使用了一些相同的变量,这弄乱了Highchart的格式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.