[英]Highcharts not displaying column chart
在過去的幾個小時中,我一直在嘗試加載Highcharts。
一切似乎都是正確的。 我在Highcharts參考之前有Jquery。
我在Chrome中的控制台上沒有任何錯誤。
我希望它看起來像這樣(工作的JQuery) 工作的Jquery
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/static/highcharts/js/highcharts.js"></script>
<script src="/static/highcharts/js/modules/exporting.js"></script>
<title>Tool Tracker</title>
<body>
<div>
<div id="chart_id" class="chart" style="height:100px; width:100%"></div>
</div>
<!-- Maps the Python template context variables from views.py to the Highchart js variables -->
<script>
var chart_id = chart_id
var chart = {'renderTo': 'chart_id', 'height': 500}
var title = {'text': '123456 Tool life by Location'}
var xAxis = {'categories': ['T01', 'T02']}
var series = [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
</script>
<!-- Highchart js. Variable map shown above -->
<script>
$(document).ready(function() {
$(chart_id).highcharts({
chart: chart,
title: title,
xAxis: xAxis,
series: series
});
});
</script>
</body>
下面是一個JSfiddle- 不起作用
謝謝您的幫助!
您不工作的小提琴有兩個問題:
首先,在html部分和JSfiddle的External resource
工具中,所有腳本都包含兩次。 您需要刪除外部資源或刪除<script>
標記。
其次,在您的javascript的第一行中var chart_id = 'chart_id
您錯過了結束時間';
和chart_id前面的#
,讓JQuery知道它是您要引用的ID。
var chart_id = '#chart_id';
是你想要的。
原始示例的HTML代碼:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
包含您數據的Javascript代碼:
$(function () {
$('#container').highcharts({
title: {
text: '123456 Tool life by Location'
},
xAxis: {
categories: ['T01', 'T02']
},
labels: {
items: [{
html: 'Some text',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.