Question

所以我试图创建一个应该包含多个图表的页面，但到目前为止，它只显示一个。我不确定是否有错误，因为我刷新后我所做的更改不会反映到页面上，或者我的代码中确实存在问题。我想要做的是显示一个条形图，下面是一个饼图。它只显示条形图。这是迄今为止的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/try.css">
<link rel="stylesheet" href="css/ipsosmenu.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title> Project Blue Summary </title>
<body background="http://wallpaper.zone/thumb/52068.jpg">   
</head>

<body>
<div class = "result">
<font color = 'black' style = Arial>
<em>
<strong>
<p> <b> Project Blue Summary </b> </p>
</strong>
</em>
</font>
</div>

  <div id="bar-example"></div>
  <div id="graph"><div>

<script>
Morris.Bar({
  element: 'bar-example',
  data: [
    { y: 'SM Mall of Asia', a: 500, b: 390 },
    { y: 'SM Megamall', a: 750,  b: 650 },
    { y: 'SM North Edsa', a: 350,  b: 240 },
    { y: 'SM Aura', a: 700,  b: 250 },
    { y: 'Robinson\'s Manila', a: 450,  b: 340 },
    { y: 'Robinson\'s Cebu', a: 725,  b: 625 },
     { y: 'Ayala Cebu', a: 500, b: 400 },
    { y: 'Rockwell', a: 535,  b: 235 },
    { y: 'Serendra', a: 700,  b: 815 },
    { y: 'Bel-Air', a: 750,  b: 550 },
    { y: 'Festival Mall', a: 450,  b: 420 },
    { y: 'Adriatico', a: 750,  b: 90 },
    { y: 'UP Town Center', a: 620, b: 490 },
    { y: 'Greenhills', a: 500, b: 570 },
    { y: 'Glorietta/Greenbelt', a: 600, b: 450 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['AMEX', 'With BDO Terminal']
});

Morris.Donut({
  element: 'graph',
  data: [
    {value: 70, label: 'foo'},
    {value: 15, label: 'bar'},
    {value: 10, label: 'baz'},
    {value: 5, label: 'A really really long label'}
  ],
  formatter: function (x) { return x + "%"}
}).on('click', function(i, row){
  console.log(i, row);
});
</script>

</body>
</html>

Javascript：一页中的多个图表/图表

0 个答案: