提问人:MCIT Trends 提问时间:8/25/2023 最后编辑:MCIT Trends 更新时间:8/25/2023 访问量:37
Highcharts 数据过滤器 Conigniter
Highcharts data filter Conigniter
问:
我创建了一个highchart来查看MySQL表中发布的数据。然后,我想在图表上逐项过滤那些发布的数据。我使用以下代码来执行此操作:
控制器 (Chart_issue.php)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chart_issue extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('data');
}
public function index()
{
$data['item_list'] = $this->data->fetch_item();
$this->load->view('charts/chart_issue');
}
public function data()
{
if ($this->input->post('item_id') )
{
$data = $this->data->get_issued_data();
$category = array();
$category['name'] = 'Item';
$series1 = array();
$series1['name'] = 'Issued Qty';
$series2 = array();
$series2['name'] = 'Date';
foreach ($data as $row)
{
$category['data'][] = $row->item;
$series1['data'][] = $row->issued_qty;
$series2['data'][] = $row->billed_date;
}
$result = array();
array_push($result,$category);
array_push($result,$series1, $series2);
print json_encode($result, JSON_NUMERIC_CHECK);
}
} }
模型(Data.php)
function get_issued_data($id)
{
$this->db->select('sur.update_stock_id, sus.branch_id, sus.request_no, sus.billed_date, store_branch.branch_name AS branch,
si.item_id, si.item_name AS item, tf.avqty, sur.r_qty as r_qty, sur.ap_qty as ap_qty,
tf1.issued_qty');
$this->db->from('store_update_request sur');
$this->db->join('store_update_stock sus', 'sus.update_stock_id=sur.update_stock_id', 'left');
$this->db->join('store_branch', 'sus.branch_id=store_branch.branch_id', 'left');
$this->db->join('store_item si', 'sur.item=si.item_id', 'left');
$this->db->join('(select update_stock_id, item, is_qty AS issued_qty
from store_update_issue
where store_update_issue.status=1
) AS tf1',
'si.item_id=tf1.item AND sur.update_stock_id = tf1.update_stock_id','left' );
$this->db->join('(select item, sum(qty) AS avqty
from store_update_stock_details
where store_update_stock_details.status=1
group by item) AS tf', 'si.item_id=tf.item', 'left');
$this->db->where(array('sus.status' => 1 , 'store_item.item_id' => $id));
$query = $this->db->get();
if ($query->num_rows() > 0) {
return $query->result();
}
return false;
}
查看 (chart_issue.php)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Item Issued Summary',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['']
},
yAxis: [{
title: {
text: 'Issues'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: []
}
$.getJSON("data", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
// ]]></script>
<a href="<?= site_url('welcome') ?>"> <input type="button" class="btn btn-warning" value="Back to Home"></a>
Item Issued Data</h3>
</div>
<body>
<div class="col-md-3">
<select name="item" id="item" class="form-control">
<option value="">Select Item</option>
<?php
foreach($item_list->result_array() as $row)
{
echo '<option value="'.$row["item_id"].'">'.$row["item_name"].'</option>';
}
?>
</select>
</div>
</div>
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto;"></div>
</body>
<script type='text/javascript' src='<?php echo base_url(); ?>assets/js/highcharts.js'></script>
<script type='text/javascript' src='<?php echo base_url(); ?>assets/js/exporting.js'></script>
错误
无法在下拉列表中填充项目列表,并且筛选不起作用。
所需输出
通过下拉列表根据所选项目筛选图表数据。
谁能帮忙?
答: 暂无答案
评论