javascript - jqplot,分割动态图
问题描述
我有一个有 12 个值的图表,我想将它分成 3 个图表,每个图表有 4 个值。所以我可以有4个图表。数组列表是动态的。
$(document).ready(function(){
var s1 = [2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10];
var s2 = [7, 5, 3, 2,7, 5, 3, 2,7, 5, 3, 2];
var s3 = [14, 9, 3, 8,14, 9, 3, 8,14, 9, 3, 8];
var s4 = [15, 8, 2, 10,15, 8, 2, 10,15, 8, 2, 10,];
plot3 = $.jqplot('chart3', [s1, s2, s3, s4], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.enhancedPieLegendRenderer.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" />
<div id="chart3"></div>
问题是我该怎么做?我有一个看起来像这样的数组:
array(0 => array(0 => array(0 => 2,1 => 6,2 => 7,3 => 10)),//this will be the first diagram
1 => array(0 => array(0 => 7,1 => 5,2 => 3,3 => 2)),// this the second
2 => array(0 => array(0 => 14,1 => 9,2 => 3,3 => 14)),//this the third
3 => array(0 => array(0 => 15,1 => 8,2 => 2,3 => 10))//this the fourth
);
该列表是动态的。有人可以帮我吗?
解决方案
您需要遍历数组并根据每个子数组数据创建一个图表,如下所示:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.enhancedPieLegendRenderer.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" />
<?php
$array = array(
0 => array(
0 => array(
2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10
)
),
1 => array(
0 => array(
7, 5, 3, 2,7, 5, 3, 2,7, 5, 3, 22
)
),
2 => array(
0 => array(
14, 9, 3, 8,14, 9, 3, 8,14, 9, 3, 8
)
),3 => array(
0 => array(
15, 8, 2, 10,15, 8, 2, 10,15, 8, 2, 10,
)
),4 => array(
0 => array(
12, 18, 2, 0,1, 8, 2, 7,6, 8, 2, 21,
)
)
);
foreach($array as $key=> $arr){?>
<div id="chart<?php echo $key;?>"></div>
<script type="text/javascript">
$(document).ready(function(){
plot3 = $.jqplot('chart<?php echo $key;?>', <?php echo json_encode($arr); ?>, {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
$('#chart<?php echo $key;?>').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
<?php } ?>
推荐阅读
- qt - 如何最大化QDialog到全屏?
- django - 如何在 django-oscar 中自定义模板?
- python - Visual Studio ImportError: No module named boto3
- java - Java Spring 中的多个 AWS Cred
- docker - docker-compose 卷错误的权限根
- php - 直接到 .html 而不是 .php
- machine-learning - 非线性激活函数在神经网络的基础层面上做了什么?
- r - 用 try/catch 省略函数的返回
- code-coverage - llvm-cov:未实例化函数的统计信息
- php - 更新数据库中的产品库存