jqplot甜甜圈数据消失了

时间:2015-04-19 23:38:13

标签: jquery jqplot

我正在使用jqplot进行甜甜圈图显示,但是我遇到了一个不寻常的问题。

浏览器中缺少数据集。

应该读的行:

var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

var plot3 = $.jqplot('chart3', [s1, s2], {
seriesDefaults: {
  // make this a donut chart.
  renderer:$.jqplot.DonutRenderer,
  rendererOptions:{
    // Donut's can be cut into slices like pies.
    sliceMargin: 3,
    // Pies and donuts can start at any arbitrary angle.
    startAngle: -90,
    showDataLabels: true,
    // By default, data labels show the percentage of the donut/pie.
    // You can show the data 'value' or data 'label' instead.
    dataLabels: 'value'
  }
}
});

浏览器中缺少数据,因此只显示:

 var s1 = ;
 var s2 = ;

这给我留下了空白页面,因为没有数据可以形成图表。 问题似乎是双括号。如果我删除了数据的容器括号,那么浏览器会看到它,但是代码无法正常工作,因为它无法理解。

var s1 = ['a',6], ['b',8], ['c',14], ['d',20];
var s2 = ['a', 8], ['b', 12], ['c', 6], ['d', 9];

在浏览器甚至看不到我编码的内容之前,我没有遇到类似的问题。我无法看到我做的与网络上的任何其他示例有什么不同。

这是我正在使用的完整代码;

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/js/jquery.jqplot.css">


</head>
<body style="background-color: #000;">
<div id="chart3" style="height:300px; width:500px;"></div>

<script type="text/javascript">
var s1 = [['a',6], ['b',8], ['c',14], ['d',20]];
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

var plot3 = $.jqplot('chart', [s1], {
seriesDefaults: {
  // make this a donut chart.
  renderer:$.jqplot.DonutRenderer,
  rendererOptions:{
    // Donut's can be cut into slices like pies.
    sliceMargin: 3,
    // Pies and donuts can start at any arbitrary angle.
    startAngle: -90,
    showDataLabels: true,
    // By default, data labels show the percentage of the donut/pie.
    // You can show the data 'value' or data 'label' instead.
    dataLabels: 'value'
  }
}
});
</script>
<script language="javascript" type="text/javascript" src="assets/js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="assets/js/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="assets/js/jqplot.donutRenderer.js"></script>
</body>

正如你所看到的,这里没有太多错误。在某些情况下,我尝试过不同版本的jquery。我已经尝试将脚本放在页面上的不同位置但没有帮助。

这是我用作基础的类似工作示例的链接,我无法理解为什么我的工作不正常。

http://jsfiddle.net/devmgs/1xcn4bf5/1/

非常感谢您的帮助

理查德

1 个答案:

答案 0 :(得分:0)

好的,看起来所需要的只是在外部括号和内部内容之间放置一个空格。然后显示数据。

还有另一个错误,但将脚本链接从页面底部移动到标题也解决了。现在应该可以正常工作。