/ / Como incorporar um gráfico Highcharts à postagem no blog jekyll? - javascript, highcharts, jekyll

Como incorporar um gráfico de Highcharts à postagem do blog jekyll? - javascript, highcharts, jekyll

Quero exibir este exemplo simples de altos gráficos (http://www.highcharts.com/docs/getting-started/your-first-chart) no meu blog jekyll hospedado no github, mas não conseguiu obtê-lo, qualquer ajuda é apreciada.

Eu usei o modelo boostrap do twitter, não deve ser o problema, meus gráficos D3.js funcionam bem.

Esta é a minha página de postagem no blog, que não está sendo processada.

---
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>

Respostas:

1 para resposta № 1

O erro do console para você, exemplo de Highcharts Uncaught TypeError: undefined is not a function significa que a biblioteca Highcharts não é carregada antes $("#container").highcharts({...}); começa.

Tente remover a linha de código $(function () { e a última linha javascript });