Highchart没有使用外部json数据填充
[英]Highchart is not getting populated using external json data
问题描述
我正在尝试通过JSON重新加载Highcharts图表的数据。 当我硬编码HTML Highchart的categories和series时，我有一个HTML文件，但是当我尝试使用Json加载数据时，它不起作用。
HTML文件
<!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.7.1/jquery.min.js"></script> <script src="C:\\Users\\Global Soft\\Desktop\\HighChart\\js\\highcharts.js" type="text/javascript"></script> <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Revenue vs. Overhead', x: -20 //center }, subtitle: { text: 'Json Example', x: -20 }, xAxis: { categories: [] }, yAxis: { title: { text: 'Amount' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] } $.getJSON("C:\\Users\\Global Soft\\Desktop\\HighChart\\zmy design\\data.json", function(json) { options.xAxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; chart = new Highcharts.Chart(options); }); }); </script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
data.json
[{ "name": "Month", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] }, { "name": "Revenue", "data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221] }, { "name": "Overhead", "data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897] }]
1 个解决方案
解决方案1
2 2015-05-15 05:21:25
您的代码的问题是您要加载js文件两次，并且还要确保文件路径正确。 尝试这个 ：
$(document).ready(function() { var options = { chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Revenue vs. Overhead', x: -20 //center }, subtitle: { text: 'Json Example', x: -20 }, xAxis: { categories: [] }, yAxis: { title: { text: 'Amount' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] } $.getJSON("https://googledrive.com/host/0B3_2aPWXzW1LMGZmblNBcVBzcjg", function(json) {//https is aaddress for your file options.xAxis.categories = json[0]['data']; options.series[0] = json[1]; options.series[1] = json[2]; chart = new Highcharts.Chart(options); }); });
<!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.7.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
创建Highchart（柱形图）并从外部json文件读取数据
[英]Create Highchart (Column chart) and read data from external json file
javascript中的数组和对象处理以获取highchart json数据
[英]array and object handling in javascript for getting highchart json data
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.