Highchart绘图问题答案

【问题标题】：Highchart drawing issueHighchart绘图问题
【发布时间】：2014-05-04 10:24:46
【问题描述】：

我在一个 html 文件中有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id=0 style='width:400px; height:400px'></div>

<script type='text/javascript' src='https://dl.dropboxusercontent.com/u/93241685/jquery.1.9.1.min.js'></script>
<script type='text/javascript' src='https://dl.dropboxusercontent.com/u/93241685/highcharts.js'></script>

<script>
$(function () {
$('#0').highcharts({
chart: {type: 'area',plotBackgroundColor:'white',plotBorderWidth: '',plotShadow: true,zoomType:'undefined'},
title: {text:'TTT'},
xAxis: {title: {text:'trX'}},
yAxis: {title: {text:'Ygrg'}},
tooltip: {pointFormat: '{series.name}  {point.x}'},
});});

var chart = $('#0').highcharts();
chart.addSeries({
name: 'S1',
data: [1,2,3,4,5,6,1,2,3,4,5,6,1,2,3,4,5,6]
}, false);
chart.redraw();

</script>
</body>
</html>

当我运行它时，只有 div 显示顶部的图表标题。没有其他的！甚至没有出现 xAxis 标题或 yAxis 标题。现在，有趣的是，当我尝试在 JSFiddle 上运行它时，它完美地显示了图形。 JSFiddle 链接也在下面给出。在 html 文件中执行此操作可能是什么问题，我尝试从文件中删除多余的位，并可能删除所有内容，但仍然没有用。请帮忙。

http://jsfiddle.net/5fway/

【问题讨论】：

标签： javascript jquery html highcharts

【解决方案1】：

尝试将其包含在 document.ready() 中，因为在 jsfiddle 中您指示运行代码 jquery onload（如 document.ready()），如下所示：

$(document).ready(function(){
  $('#0').highcharts({
    chart: {type: 'area',plotBackgroundColor:'white',plotBorderWidth: '',plotShadow: true,zoomType:'undefined'},
    title: {text:'TTT'},
    xAxis: {title: {text:'trX'}},
    yAxis: {title: {text:'Ygrg'}},
    tooltip: {pointFormat: '{series.name}  {point.x}'},
  });

  var chart = $('#0').highcharts();
  chart.addSeries({
    name: 'S1',
    data: [1,2,3,4,5,6,1,2,3,4,5,6,1,2,3,4,5,6]
  }, false);
  chart.redraw();
});

【讨论】：