私はウェブ開発、特にjqueryなどで新しくなっています。私のコードでは、ajaxリクエストのデータでmorrisチャートが見られます。以下のコードスニペット
HTML
jquery ajaxを使用してモーリスチャートが未定義PHP
<div id = "node" class = "something">//some divs here</div>
<div id = "myModal role = "dialog">//some divs here again
<div class = "modal-body"><div id = "my_chart"></div></div></div>
Javascriptを
<script type="text/javascript">
$(document).ready(function(){
var chart_data = '';
var div_id = '';
$(".something").click(function(){
div_id = jQuery(this).attr("id");
$.ajax({
type : 'POST',
url : 'test1',
data : { "node_num" : div_id},
success: function(data){
chart_data = data;
console.log(chart_data);
$('#myModal').modal();
},
error: function(data){
alert("Something went wrong, please refresh");
}
});
});
$("#myModal").on('shown.bs.modal', function(){
$('#my_chart').empty();
var chart = Morris.Area({
element: 'my_chart',
data: chart_data,
xkey: 'time',
ykeys:['power'],
labels:['Power(Watts)'],
pointSize: 2,
hideHover: 'auto',
resize: true,
lineColors: ['#1abc9c'],
fillOpacity: 0.75,
parseTime: false
});
});
$(".something").hover(function(){
$(this).css('cursor','pointer');
})
});
</script>
はPHP
public function test1()
{
$node_num = $this->input->post('node_num');
$chart = '';
$chart_data = '';
$query = $this->Nodes->get_chartdata($node_num);
foreach($query->result() as $row)
{
$time = substr($row->n_date, -8);
$power = ($row->voltage)*($row->current);
$chart .= "{ power: ".$power.", time: '".$time."' }, ";
}
$chart_data = '['.$chart.']';
echo $chart_data;
}
です
PHP出力
[{パワー:21.837696、時間:'10:59:41' }、{パワー:2.07552、時間:'11:00:23' }、{パワー:時間:'11:03:52 '}、{パワー:20.195136、時間:'13:45:01'}、
とすると、morrisチャートにはグラフlike thisが表示されます(データ:chart_dataをPHP出力に置き換えました)。代わりに、私はthisを得ています。私は他の方法に従ったが、それはまだ同じである。どのように私はこれに対処することができますか?あまり前もってありがとう!
で
dataType:'json',
を追加します。どうもありがとうございます!ついに私は必要なものを手に入れました。 –