PHP:mb_encode_mimeheader()的用法_mbstring函數
808
2023-12-11
eval函數可以把一些處理過程序代碼進行解析從而達到可以執行的一個狀態，查了很多帖子，jqchart插件做折線圖時，處理返回數據時全都是eval，但我怎么也弄不出來，后來發現：
1、根本不需要eval處理，直接截取字符串即可（返回值要拼接好）；
2、處理好的字符串放進series的data里要加上[];
下面是代碼：
html頁面<body>標簽里面只放了一個<div id="jqChart" style="width: 500px; height: 300px;"></div>；
<script>里面
<script type="text/javascript" src="http://www.gimoo.net/t/1904/jquery.1.8.2.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1904/jquery-jqChart-min.js"></script>
<script type="text/javascript">
$(function () {
$.get("tgajax.php",function(data){
var dom = data.substring(0,data.length-1);//主要是對返回數據的處理，后面很明顯多了一個","
//var dom = eval('(' + dom + ')');
//alert( dom);
$('#jqChart').jqChart({
title: { text: '線形圖示例' },
axes: [
{
location: 'left',
minimum: 1,
maximum: 10,
interval: 1,
}
],
series: [
{
type: 'line',
title:'上海',
markers: null,//拐點不用圓點標示
strokeStyle: 'blue' ,
data: [['json', 1], ['per', 9], ['perter', 3]]
},
{
type: 'line',//line,Column
title:'北京',
strokeStyle: 'red' ,
data:[dom]
},
]
});
});
});
</script>
后臺處理頁面我就用簡單的php弄了，別的也不會
<?php
include ("configaz.php"); //數據庫連接在另一個文件內，這里就不弄了
$sql="select sid,sname,sprice,count(sprice) as pricenum from shangpin group by sname";
$query=mysql_query($sql);
$row=mysql_fetch_array($query);
while($row=mysql_fetch_array($query)){
$pricenum=$row['pricenum'];
$sname=$row['sname'];
}
echo $str .= "['".$sname."',".$pricenum."],";//拼接字符串，按照jqChart要求的字符串格式，當然用數組更好，可惜不怎么會
肯定還有更好的方法 只是我剛開始學，慢慢摸索
相信解決辦法不止以上所述，肯定還有更好的解決辦法，歡迎大家共同學習進步。
ps：ajax讀取數據,使用jqchart顯示圖表
最近項目中需要顯示出圖表效果，原來收集到的圖表插件終于有用武之地了。
但是和jqchart對比，還是有很多不同之處的。
實現效果：
我就對jqchart進行了重新編寫。
首先要解決的是不顯示x軸和y軸：
//各DIV作成
// 取消標題顯示
/*
this.titleBox//Title
=this.mkBoxElement('T',
this.op.titleLeft,this.op.titleTop
).appendTo(this.jQcanvasBox)
.css('width',this.op.width-this.op.titleLeft)//fix for safari3 2007.12.4
.get(0);
*/
// 取消y軸數字顯示
/*
this.scaleYBox//Y?スケ?ル
=this.mkBoxElement('Y',
this.op.scaleYLeft,this.op.scaleYTop
).appendTo(this.jQcanvasBox).get(0);
*/
// 取消x軸分類顯示
/*
this.scaleXBox//X?スケ?ル
=this.mkBoxElement('X',
this.op.scaleXLeft,this.op.scaleXTop
).appendTo(this.jQcanvasBox).get(0);
*/
其次，對于拐點的文字，原來顯示是相應的data值，現在需要顯示的是對應的x軸名稱：
if( x <= op.width){
var dx=x-op.paddingL,dy=y-op.paddingT;
var dxx = i<=0 ? (dx+op.labelDataOffsetX - 5 + 'px'):( dx+op.labelDataOffsetX - 20 + 'px'); //坐標點x軸偏移
var dyy = i%2 ? (dy+op.labelDataOffsetY - 25 + 'px'):(dy+op.labelDataOffsetY - 5 + 'px'); //坐標點y軸偏移
it.wrtText(
//dx+op.labelDataOffsetX - 20 + 'px',
dxx,
//dy+op.labelDataOffsetY - 10 + 'px',
dyy,
//op.rows[i], // pre: 坐標點data值
op.txtpointers[i], // cychai:坐標點文字
op,
"#jQchart-data-D-"+op.id
).css('color',(op.data.length==1)?'#333':strokeStyle)
.css({"width":"100px","font-size":"12px"}); // cychai:樣式控制
使用默認的數據可以顯示出來了。接下來就是和開發的協作了。
我希望可以使用ajax異步獲取數據，然后在前臺顯示。
這里，我使用了一個示例頁面chartdata.html, 即需要的數據頁
[{labelX : ["外觀設計","便攜性","易用性","電池待機","攝像功能","變焦"],data :[[5,7,2,3,9,4]]}]
在前臺，我通過ajax請求該頁面，對返回的json數據進行處理，傳遞給chartSetting：
$(function(){
$.ajax({
url: "chartdata.html",
type: "GET",
success: function(cdata){
showDDChart(cdata);
}
});
function showDDChart(cdata){
var dd_chart = eval(cdata)[0];
var chartSetting={
config : {
title : "",
titleLeft: 70,
labelX :dd_chart.labelX,
//labelX :["外觀設計","便攜性","易用性","電池待機","攝像功能","變焦"],
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
//data: [[5,3,1,8,4,9]]
data :dd_chart.data
};
$('#canvasMyID').jQchart(chartSetting);
}
});
完整的html頁面：
<head>
<[if IE]>
<mce:script src="http://www.gimoo.net/t/1904/excanvas-compressed.js" mce_src="excanvas-compressed.js" type="text/javascript" ></mce:script>
<![endif]-->
<mce:script src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" mce_src="http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/lib/jquery-1.2.3.min.js" type="text/javascript"></mce:script>
<mce:script src="http://www.gimoo.net/t/1904/jquery.jqchart.js" mce_src="jquery.jqchart.js" type="text/javascript" charset="utf-8"></mce:script>
</head><body>
<canvas id="canvasMyID" height="200"></canvas>
<mce:script type="text/javascript"><
$(function(){
$.ajax({
url: "chartdata.html",
type: "GET",
success: function(cdata){
showDDChart(cdata);
}
});
function showDDChart(cdata){
var dd_chart = eval(cdata)[0];
var chartSetting={
config : {
title : "",
titleLeft: 70,
labelX :dd_chart.labelX,
//labelX :["外觀設計","便攜性","易用性","電池待機","攝像功能","變焦"],
scaleY : {min: 0,max:10,gap:2},
width: 300+25,
height: 125+50,
paddingL : 10,
paddingT : 10
},
//data: [[5,3,1,8,4,9]]
data :dd_chart.data
};
$('#canvasMyID').jQchart(chartSetting);
}
});
// --></mce:script>
</body>
</html>
OK，大功告成！ 完整示例我會放到我的資源里。
好久都沒有用jquery ajax了，拼json數據都有些生疏了。還是喜歡開發這種有邏輯性的工作....
