iT邦幫忙

0

FusionCharts 圖表如何按照自己想要的順序排列

chart
神威 2018-03-14 09:47:06 ‧ 4944 瀏覽

  • 分享至 

  • xImage

大家好，我用FusionCharts作圖表
但不知怎麼固定順序
例如:
我從SQL撈出小明，阿華，美美的成績平均後放入FusionCharts
但他可能會變成阿華，小明，美美
順序錯亂讓我很困擾，請問有甚麼方法可以解決的嗎?
謝謝
以下是我的code
n1.jsp

<%   
    Show sh=new Show();       
  List<axmt620> ax=sh.Getaxmt620();
   String pro[]={"空壓成品","油壓成品","油壓修理","系統","總合"};  
    double proform[]=new double [11];
    for(int i=0;i<proform.length;i++){proform[i]=0;}    
  //計算過程省略
%>
<!DOCTYPE html>
<html>
 <body>
<div id="chart"></div>
<%@page import="bean.FusionCharts" %>  
        <%
            String chartXML = "<chart __attributes__>__set__</chart>";
            String attributeTemplate = "__key__=\"__value__\" ";
            String setXMLTemplate = "<set label=\"__label__\" value=\"__value__\" />";
            Map<String, String> chartobj = new HashMap<String, String>();     
            chartobj.put("caption", "金額");
            Map<String, String> dataobj = new HashMap<String, String>();     
 for(int i=0;i<pro.length;i++){dataobj.put(pro[i] ,Double.toString(proform[i]));}     
            ArrayList<String> chartAttributeList = new ArrayList<String>();
             ArrayList<String> setList = new ArrayList<String>();
            for(Map.Entry cobj:chartobj.entrySet())
            {
                String tempAttributeTemplate = attributeTemplate;
                tempAttributeTemplate = tempAttributeTemplate.replaceAll("__key__", (String) cobj.getKey());
                tempAttributeTemplate = tempAttributeTemplate.replaceAll("__value__", (String) cobj.getValue()); 
                chartAttributeList.add(tempAttributeTemplate);
                String tempSetTemplate = setXMLTemplate;
                tempSetTemplate = tempSetTemplate.replaceAll("__label__", (String) dobj.getKey());
tempSetTemplate = tempSetTemplate.replaceAll("__value__", (String) dobj.getValue()); 
                setList.add(tempSetTemplate);
            }
            StringBuilder chartAttributeString = new StringBuilder();
            for(String s: chartAttributeList)
            chartAttributeString.append(" " +  s);                          
            StringBuilder setAttributeString = new StringBuilder();
            for(String s: setList)
            setAttributeString.append(s);                
chartXML = chartXML.replaceAll("__attributes__",chartAttributeString.toString());
chartXML = chartXML.replaceAll("__set__",  setAttributeString.toString());
FusionCharts columnChart= new FusionCharts(
            "bar2d",              
                        "chart1",// chartId
                        "800","500",// chartWidth, chartHeight
                        "chart",// chartContainer
                        "xml",// dataFormat
                       chartXML //dataSource               
                    );  
            %>
<%=columnChart.render()%></br>
    </body>
</html>
看更多先前的討論...收起先前的討論...
神威 iT邦研究生 4 級 ‧ 2018-03-14 09:47:59 檢舉
補java部分
FusionCharts.java
```
public class FusionCharts {
private String constructorTemplate = "<script type=\"text/javascript\">FusionCharts.ready(function () {new FusionCharts(__constructorOptions__);});</script>";
private String renderTemplate = "<script type=\"text/javascript\">FusionCharts.ready(function () { FusionCharts(\"__chartId__\").render();});</script>";
private String[] chartOptions = new String[10];
private String chartDataSource = "";
public FusionCharts(String type, String id, String width, String height, String renderAt, String dataFormat, String dataSource) {
this.chartOptions[0] = id;
this.chartOptions[1] = width;
this.chartOptions[2] = height;
this.chartOptions[3] = renderAt;
this.chartOptions[4] = type;
this.chartOptions[5] = dataFormat;
if(this.chartOptions[5].contains("url")) {
this.chartOptions[6] = "\""+dataSource+"\"";
} else {
this.chartOptions[6] = "__dataSource__";
this.chartDataSource = this.addSlashes(dataSource.replaceAll("\n", ""));
}
}
private String jsonEncode(String[] data){
String json = "{type: \""+this.chartOptions[4]+"\",renderAt: \""+this.chartOptions[3]+"\",width: \""+this.chartOptions[1]+"\",height: \""+this.chartOptions[2]+"\",dataFormat: \""+this.chartOptions[5]+"\",id: \""+this.chartOptions[0]+"\",dataSource: "+this.chartOptions[6]+"}";
return json;
}
public String render() {
String outputHTML;
if(this.chartOptions[5].contains("url")) {
outputHTML = this.constructorTemplate.replace("__constructorOptions__", this.jsonEncode(this.chartOptions))+this.renderTemplate.replace("__chartId__", this.chartOptions[0]);
} else {
if("json".equals(this.chartOptions[5])) {
outputHTML = this.constructorTemplate.replace("__constructorOptions__", this.jsonEncode(this.chartOptions).replace("__dataSource__",this.chartDataSource))+this.renderTemplate.replace("__chartId__", this.chartOptions[0]);
} else {
outputHTML = this.constructorTemplate.replace("__constructorOptions__", this.jsonEncode(this.chartOptions).replace("__dataSource__","\'"+this.chartDataSource+"\'"))+this.renderTemplate.replace("__chartId__", this.chartOptions[0]);
}
}
return outputHTML;
}
}
froce iT邦大師 1 級 ‧ 2018-03-14 12:08:32 檢舉
建議啦，先把每個步驟傳出的JSON，不管前後端，都列出來看看，你才能知道問題是出在前端還是後端。
㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-03-14 13:15:42 檢舉
因為你是用jsp，所以我不太確定是否也是同樣的情況。
早期我曾經碰過使用json的資料時。在javascript會做很莫名的自已排序的動作
我想你用jsp，也有可能會發現類同的事。

當時我的解決方式，就是原本純資料的json。再多給他一個key值。就不會排了。

如原本的
```
{"空壓成品","空壓修理"}
```
變成
```
{"0":"空壓成品","1":"空壓修理"}
```
這樣在json轉成物件時，就不會亂亂排。
只是將這樣的經驗告知你。因為我是在使用javascript上發生的。
神威 iT邦研究生 4 級 ‧ 2018-03-14 14:24:23 檢舉
yoching大大
感謝
這方法我試過囉，但還是不行.....
froce iT邦大師 1 級 ‧ 2018-03-14 14:34:46 檢舉
我不知道你產生的JSON長怎樣。
不過多筆資料，我會這樣整理。
[
{key:value},
{key:value},
{key:value}
]

但是以我的經驗，有時候會是後端在影響，在python中的話dict是無序的，轉成JSON有時候也會亂跳。
神威 iT邦研究生 4 級 ‧ 2018-03-14 15:10:58 檢舉
froce大大
了解，我會再想想看，謝謝
㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-03-14 16:54:13 檢舉
那就試試不要用0123。將KEY改成用A1 A2 A3等字串KEY看看。
記得那時好像用數字KEY是沒用了。改成文字KEY才OK。

再補充一點。如果要用文字KEY的話。記得其KEY的長度要統一。
因為像是這種無序的情況下，預設會自動字字串自動排序時。
A1跟A10。A10會算優先的。最好是A001 A010這樣
神威 iT邦研究生 4 級 ‧ 2018-03-15 11:08:34 檢舉
yoching大大好
如同froce大所說，map是會亂跳的
所以這方法也不行喔(我試過了)
最後我用list解決
感謝大大
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
froce
iT邦大師 1 級 ‧ 2018-03-14 16:14:57
最佳解答

後來有點時間幫你看了一下，我想問題是出在這。

Map<String, String> dataobj = new HashMap<String, String>();

java 的 Map 也是無序的，也就是 Map 物件產生時，裡面的順序不重要，所以會亂跳。

在 python 有 ordereddict 可以產生有序的 dict 物件，但java我就不知道了。
不過我之後的解法會是像我上面說的。

[
    {},
    {},…
    {}
]

利用有序的陣列，依序每一筆的資料值。

神威 iT邦研究生 4 級 ‧ 2018-03-15 11:04:26 檢舉

froce大大
謝謝你
經過你的提醒，我往這方面著手
總算是讓圖表按照我的方式排列了
謝謝

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22199 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙