可以在同一页面上插入两张图表吗? 我从数据库中提取数据,然后在页面上绘制图形。 这是我用于绘制图形的伪代码,我更改了id元素,但是我只显示了第一个图形,而第二个图形不起作用。
<? $res_app = mysql_query("SELECT ... ")
...
?>
<div id="graph"></div>
<pre id="code" class="prettyprint linenums">
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 + "%"}
});
</pre>
<? $res_app = mysql_query("SELECT ... ")
...
?>
<div id="graph1"></div>
<pre id="code" class="prettyprint linenums">
Morris.Donut({
element: 'graph1',
data: [
{value: 50, label: 'foo', formatted: 'at least 50%' },
{value: 25, label: 'bar', formatted: 'approx. 25%' },
{value: 20, label: 'baz', formatted: 'approx. 20%' },
{value: 5, label: 'A really really long label', formatted: 'at most 5%' }
],
formatter: function (x, data) { return data.formatted; }
});
</pre>
答案 0 :(得分:0)
我提出了以下解决方案,以便在一个页面上呈现多个图表:
How to split repository (folders based)
HTML看起来像这样:
var $lineChart = $('.line-chart-js');
if($lineChart.length) {
$lineChart.each(function (index, element) {
var chartData = JSON.parse($(this).attr('data-chart'));
new Morris.Line({
// ID of the element in which to draw the chart.
element: $(this),
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: chartData,
// The name of the data record attribute that contains x-values.
xkey: $(this).attr('data-x'),
// A list of names of data record attributes that contain y-values.
ykeys: [$(this).attr('data-y')],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: [$(this).attr('data-label')]
});
});
}
这样您就可以重复使用您的课程,并且不必为每个图表编写单独的javascript。