我需要将jsfiddle的Highcharts代码导出到我的本地文件。这是jsfiddle上的图表代码:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/yaxis-plotlines/ 它在jsfiddle上工作得很好,但当我把它放在我的本地文件中并在浏览器中打开时,图表不会显示。我使用“查看框架源代码”从jsfiddle获取代码,这是我得到的:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
var startDate = new Date(data[data.length - 1][0]), // Get year of last data point
minRate = 1,
maxRate = 0,
startPeriod,
date,
rate,
index;
startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point
startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
for (index = data.length - 1; index >= 0; index = index - 1) {
date = data[index][0]; // data[i][0] is date
rate = data[index][1]; // data[i][1] is exchange rate
if (date < startPeriod) {
break; // stop measuring highs and lows
}
if (rate > maxRate) {
maxRate = rate;
}
if (rate < minRate) {
minRate = rate;
}
}
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
},
plotLines: [{
value: minRate,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: maxRate,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}]
},
series: [{
name: 'USD to EUR',
data: data,
tooltip: {
valueDecimals: 4
}
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
所以它只显示空白页面。我该如何解决?感谢。
答案 0 :(得分:0)
在将<base href="http://www.highcharts.com/stock/demo/yaxis-plotlines" />
添加到头部后,它在本地工作正常。不知道为什么,但它解决了这个问题。