莫里斯图表显示图表下的代码

时间:2016-11-04 22:44:26

标签: javascript jquery morris.js

大家好,这可能是一个非常愚蠢的问题,但我到处寻找,无法找到解决方案。

我正在使用Morris图表并且它们工作正常。

问题是在图表下方显示了我不想要的图表数据

<!doctype html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
  <script src="../morris.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
  <script src="lib/example.js"></script>
  <link rel="stylesheet" href="lib/example.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
  <link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Stacked Bars chart</h1>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
// Use Morris.Bar
Morris.Bar({
  element: 'graph',
  data: [
{x: '2011 Q1', y: 3, z: 2, a: 3},
{x: '2011 Q2', y: 2, z: null, a: 1},
{x: '2011 Q3', y: 0, z: 2, a: 4},
{x: '2011 Q4', y: 2, z: 4, a: 3}
  ],
  xkey: 'x',
  ykeys: ['y', 'z', 'a'],
  labels: ['Y', 'Z', 'A'],
  stacked: true
});
</pre>
</body>

标签内的所有内容都显示在图表下方的框中。

如果你删除&#34;漂亮的印花亚麻布&#34; class会删除该框但是如果删除标记,代码仍会显示但没有图表。

有人帮忙吗?

由于

1 个答案:

答案 0 :(得分:0)

好的......很简单。

就像我在评论中所说的那样......任何一个没有的知识可能很难找到 不要责怪你。
所以在这里,问题真的很简单......对于那些知道的人。

只需将<pre id="code" class="prettyprint linenums">替换为<script>
</pre> </script>

<pre></pre>是一组文本格式标记,不等同于<script>标记。