nav-left cat-right
cat-right

open-flash-chart2系列教程(2)

上一节提到open-flash-chart2的数据是通过存储在txt文件中,然后通过类似那个http://yoururl/chart.html?ofc=datafile.txt 这样的形式来加载不同的数据,当然ofc后面的参数可以是php文件,php类库的使用将在以后的教程中出现,本节将讨论使用js加载数据的另一种方法,代码如下:
是<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<script type="text/javascript">

function ofc_ready()
{
 alert('ofc_ready');
}

function open_flash_chart_data()
{
 alert( 'reading data' );
 return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
 
var data = {
  "elements": [
    {
      "type": "bar",
      "text": "u5317u4eac",
      "values": [
        9.9355,
        18.2142,
        12.1315,
        11.9911,
        10.2637,
        4.152,
        5.8293,
        17.8541,
        17.1762,
        25.2105,
        24.9323,
        23.5468,
        2.7642,
        3.9232,
        30.6192,
        17.9746,
        26.1273,
        14.5226,
        17.3219,
        5.0837,
        2.1281,
        18.9674,
        8.3799
      ]
    }
  ],
  "title": {
    "text": "200812u9500u552eu7edfu8ba1u56feu8868"
  },
  "y_axis": {
    "min": 0,
    "max": 31,
    "steps": 2
  },
  "x_axis": {
    "labels": {
      "labels": [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ]
    }
  },
  "y_legend": {
    "text": "chinaticket.com chart 1:10000",
    "style": "color:#736AEF; font-size:14px;"
  }
};</script>

演示

这种方式更适合数据实时加载,比如php中带查询表单,open-flash-chart2的用法很灵活,如果你是新手可能现在还是一头雾水,上面的json的格式各个参数将在下一节里做详细的解释。

2 条评论 »