/ / Jekyll ब्लॉग पोस्ट में हाईचर्ट चार्ट कैसे एम्बेड करें? - जावास्क्रिप्ट, हाईचर्ट, जेकिल

Jekyll ब्लॉग पोस्ट में हाईचर चार्ट कैसे एम्बेड करें? - जावास्क्रिप्ट, हाईचार्ट्स, जेकिल

मैं इस सरल हाईचर्स उदाहरण को प्रदर्शित करना चाहता हूं (http://www.highcharts.com/docs/getting-started/your-first-chart) github पर होस्ट मेरे jekyll ब्लॉग पर, लेकिन इसे प्रस्तुत नहीं किया जा सका, किसी भी मदद की सराहना की है

मैं ट्विटर बूस्टर टेम्पलेट का उपयोग करता था, समस्या नहीं होनी चाहिए, मेरे डी 3.जेएस चार्ट अच्छी तरह से काम करते हैं।

यह मेरा ब्लॉग पोस्ट पेज है, जो प्रतिपादन नहीं कर रहा है।

---
layout: post
category : js
tagline: "Testing highcharts"
tags : [highcharts]
---
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js">
</script>
<script src="http://code.highcharts.com/modules/exporting.js">
</script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>

<script type="text/javascript">

$(function () {
$("#container").highcharts({
title: {
text: "Monthly Average Temperature",
x: -20 //center
},
subtitle: {
text: "Source: WorldClimate.com",
x: -20
},
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {
title: {
text: "Temperature (°C)"
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
tooltip: {
valueSuffix: "°C"
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
borderWidth: 0
},
series: [{
name: "Tokyo",
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: "New York",
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: "Berlin",
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: "London",
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});

</script>

उत्तर:

उत्तर № 1 के लिए 1

आपके लिए कंसोल त्रुटि Highcharts उदाहरण के लिए Uncaught TypeError: undefined is not a function इसका मतलब है कि हाईचार्ट्स लाइब्रेरी पहले लोड नहीं हुई है $("#container").highcharts({...}); शुरू होता है.

कोड की लाइन को हटाने का प्रयास करें $(function () { और अंतिम जावास्क्रिप्ट लाइन });