Javascript 如何在HTML页面中显示Highchart？

我编写了一个python代码，从一些文本文件中提取数据，然后将数据与一些html代码一起写入，然后将它们保存到.html文件中。每个文件应生成Highchart扩展热图。当我打开生成的文件时，它们不工作，我看到一个空白的html页面。然而，当我将html代码复制并粘贴到JSFIDLE中时，我能够得到完整的工作图表吗？我是一个HTML新手！ 以下是我到目前为止所拥有的（由于帖子限制，大部分实际数据被删除）

日期、时间、温度
2013-1-1,6,0.0033
2013-1-1,7,0.0033
2013-1-1,8,0.1999
2013-1-1,9,0.3319
2013-1-1,10,0.3881
2013-1-1,11,0.3845
2013-1-1,12,0.3393
2013-1-1,13,0.2786
2013-1-1,14,0.2671
2013-1-1,15,0.2813
2013-1-1,16,0.2658
2013-1-1,17,0.2186
2013-1-1,18,0.0033
2013-1-2,6,0.0033
2013-1-2,7,0.0033
2013-1-2,8,0.1946
2013-1-2,9,0.2907
2013-1-2,10,0.3349
2013-1-2,11,0.3550
2013-1-2,12,0.3453
2013-1-2,13,0.3256
2013-1-2,14,0.3021
2013-1-2,15,0.2885
2013-1-2,16,0.2645
2013-1-2,17,0.2096
2013-1-2,18,0.0033
2013-1-3,6,0.0033
2013-1-3,7,0.0033
2013-1-3,8,0.1930
2013-1-3,9,0.2193
2013-1-3,10,0.2987
2013-1-3,11,0.3786
2013-1-3,12,0.3533
2013-1-3,13,0.3542
2013-1-3,14,0.3389
2013-1-3,15,0.3037
2013-1-3,16,0.2876
2013-1-3,17,0.2310
2013-1-3,18,0.0033
2013-1-4,6,0.0033
2013-1-4,7,0.0033
2013-1-4,8,0.2098
2013-1-4,9,0.2602
2013-1-4,10,0.3613
2013-1-4,11,0.4041
2013-1-4,12,0.3540
2013-1-4,13,0.3139
2013-1-4,14,0.2810
2013-1-4,15,0.2547
2013-1-4,16,0.2511
2013-1-4,17,0.2185
2013-1-4,18,0.1818
2013-1-5,6,0.0033
2013-1-5,7,0.0033
2013-1-5,8,0.2135
2013-1-5,9,0.3367
2013-1-5,10,0.3959
2013-1-5,11,0.3862
2013-1-5,12,0.3196
2013-1-5,13,0.2738
2013-1-5,14,0.2613
2013-1-5,15,0.2586
2013-1-5,16,0.2539
2013-1-5,17,0.2191
2013-1-5,18,0.1836
2013-1-6,6,0.0033
2013-1-6,7,0.0033
2013-1-6,8,0.2059
2013-1-6,9,0.2252
2013-1-6,10,0.2858
2013-1-6,11,0.3271
2013-1-6,12,0.3339
2013-1-6,13,0.3275
2013-1-6,14,0.2996
2013-1-6,15,0.2997
2013-1-6,16,0.2613
2013-1-6,17,0.2494
2013-1-6,18,0.0480
2013-1-7,6,0.0033
2013-1-7,7,0.0033
2013-1-7,8,0.0462
2013-1-7,9,0.2475
2013-1-7,10,0.2820
2013-1-7,11,0.3236
2013-1-7,12,0.3425
2013-1-7,13,0.3598
2013-1-7,14,0.3103
2013-1-7,15,0.2893
2013-1-7,16,0.2566
2013-1-7,17,0.2344
2013-1-7,18,0.0988
2013-1-8,6,0.0033
2013-1-8,7,0.0033
2013-1-8,8,0.1704
2013-1-8,9,0.2533
2013-1-8,10,0.3186
2013-1-8,11,0.3332
2013-1-8,12,0.3660
2013-1-8,13,0.3613
2013-1-8,14,0.3664
2013-1-8,15,0.3386
2013-1-8,16,0.3091
2013-1-8,17,0.2736
2013-1-8,18,0.0988
$（函数（）{
/**
*此插件通过两种方式扩展Highcharts：
*-使用HTML5画布而不是SVG来渲染热图方块。画布
*当涉及到数千个单一形状时，其性能优于SVG。
*-添加K-D树以查找鼠标移动时最近的点。因为我们不再有SVG形状
*要捕获鼠标悬停，我们需要另一种方法来检测工具提示的悬停点。
*/
（职能（H）{
var系列=H.系列，
each=H.each；
/**
*创建一个隐藏的画布来绘制图形。稍后将复制内容
*添加到SVG图像元素。
*/
Series.prototype.getContext=函数（）{
如果（！this.canvas）{
this.canvas=document.createElement（'canvas'）；
this.canvas.setAttribute（'width'，this.chart.chartWidth）；
this.canvas.setAttribute（'height'，this.chart.chartHeight）；
this.image=this.chart.renderer.image（“”，0，0，this.chart.chartWidth，this.chart.chartHeight）.add（this.group）；
this.ctx=this.canvas.getContext（'2d'）；
}
返回此.ctx；
};
/**
*在SVG图像中绘制画布图像
*/
Series.prototype.canvasToSVG=函数（）{
this.image.attr（{href:this.canvas.toDataURL（'image/png'）}）；
};
/**
*包装drawPoints方法以在画布中绘制点，而不是较慢的SVG，
*这需要每个点有一个形状。
*/
H.wrap（H.seriesTypes.heatmap.prototype，'drawPoints'，函数（）{
var ctx=this.getContext（）；
如果（ctx）{
//画柱子
每个（this.points、函数（point）{
变量plotY=点.plotY，
形耳；
if（plotY！==undefined&&！isNaN（plotY）&&point.y！==null）{
shapeArgs=point.shapeArgs；
ctx.fillStyle=point.pointAttr[''）.fill；
ctx.fillRect（shapeArgs.x，shapeArgs.y，shapeArgs.width，shapeArgs.height）；
}
});
这个。canvasToSVG（）；
}否则{
this.chart.showLoading（“您的浏览器不支持HTML5画布，
请使用现代浏览器”）；
//取消对此的注释以在oldIE中提供低级（慢速）支持。这将导致上的脚本错误
//超过几千点的图表。
//参数[0]。调用（此）；
}
});
H.seriesTypes.heatmap.prototype.directTouch=false；//使用k-d-tree
}（高图）；
var启动；
$（“#容器”）。高图({
数据：{
csv:document.getElementById（'csv'）.innerHTML，
已解析：函数（）{
开始=+新日期（）；
}
},
图表：{
类型：'热图'，
保证金：[60,10,80,50]
},
标题：{
文本：“Highcharts扩展热图”，
对齐：“左”，
x:40
},
副标题:{
文字：“2013年前白天和小时的温度变化”，
对齐：“左”，
x:40
},
xAxis：{
键入：“日期时间”，
最小值：UTC日期（2013年0月1日），
最大值：UTC日期（2014年，0
{
    "message": "Uncaught SyntaxError: missing ) after argument list",
    "filename": "http://stacksnippets.net/js",
    "lineno": 196,
    "colno": 40
}