Highcharts 中文社区

查看: 1663|回复: 1

[JS 数据处理] X轴的文字出不来 Help(急!!

[复制链接]

该用户从未签到

1

主题

1

帖子

28

积分

HC 新手

Rank: 1

积分
28
发表于 2016-12-12 12:58:45 | 显示全部楼层 |阅读模式
本帖最后由 Yuan 于 2016-12-12 13:03 编辑

一开始我X轴是读取 date阵列的值
X轴也可以正常显示文字

xAxis: {

//x轴的座标点                    

categories: date

},
未命名.png


后面我使用ajax从网路上get json的资料下来,并放入阵列中 (value[])
在将原本categories: date 改成categories: value
X轴的文字就出不来ㄌ,我有查看console 陣列裡不是空值
為什麼會這樣 =(

改後

改後
3.png
完整程式码

  1. <pre style="font-family:Consolas;font-size:10pt;color:black;background:white;"><div class="blockcode"><blockquote><!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <link  rel="stylesheet" type="text/css"/>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  7. <script src="http://code.highcharts.com/highcharts.js"></script>
  8. <script type="text/javascript">
  9. $(function () {

  10.     var chart;
  11.     var date = [ "12/01 07:22", "12/01 10:39", "12/01 13:18", "12/01 15:39", "12/01 18:49", "12/01 19:33", "12/01 21:52", "12/01 23:52"];
  12.     var temperature = [36.5, 37.3, 39.6, 33.0, 35.9, 37.9, 38.7, 38];
  13.     var value = [];
  14.             
  15.            
  16.     $(document).ready(function() {

  17.          //JSON

  18.     $.ajax({
  19.              type: 'GET',
  20.              url: 'https://data.kaohsiung.gov.tw/opendata/DownLoad.aspx?Type=2&CaseNo1=AV&CaseNo2=2&FileType=1&Lang=C&FolderType=',
  21.              success: function (d) {
  22.               
  23.                  //判断捞到的值是什么格式
  24.                  // console.log(typeof(data));

  25.                  // 将捞来的资料转为 JSON 格式
  26.                  var thisdata = JSON.parse(d);
  27.                  //console.log(typeof(thisdata));

  28.                   for(i=0;i<8;i++){

  29.                       value.push(thisdata[i].Changetime);

  30.                       }               
  31.                
  32.                   console.log(value);  
  33.                   console.log(date);   
  34.                   console.log(typeof(value));
  35.                   console.log(typeof(date));
  36.                  
  37.                  }
  38.             
  39.         });
  40.                
  41.         
  42.         chart = new Highcharts.Chart({
  43.             chart: {
  44.              //取得div容器的id
  45.                 renderTo: 'test',
  46.                 zoomType: 'xy',
  47.                 //折线图
  48.                 type: 'line',
  49.                 //右方间距
  50.                 marginRight: 100,
  51.                 //下方间距
  52.                 marginBottom: 25
  53.             },
  54.             title: {
  55.                 text: '婴儿体温图表 单位 : °C',
  56.                 x: -20 //位置至中
  57.             },
  58.             subtitle: {
  59.                 text: '',
  60.                 x: -20
  61.             },
  62.             credits: {
  63.              //隐藏官方连结
  64.              enabled: false
  65.              },
  66.             xAxis: {
  67.              //x轴的座标点
  68.               //categories: date
  69.                 categories: value
  70.             },
  71.             yAxis: {
  72.                 title: {
  73.                  //Y轴表头
  74.                     text: '溫度 (°C)'
  75.                 },
  76.             },
  77.             tooltip: {
  78.                 formatter: function() {
  79.                         return '<b>'+ this.series.name +'</b><br/>'+
  80.                         this.x +'<br/>'+ this.y +'°C';
  81.                 }
  82.             },
  83.             legend: {
  84.              //由上至下
  85.              layout: 'vertical',
  86.              //靠左
  87.           align: 'left',
  88.           //从左上方为起点(0, 0)距离
  89.           x: 120,
  90.           y: 80,
  91.           //靠上
  92.           verticalAlign: 'top',
  93.           floating: true,
  94.           //框内背景颜色
  95.           backgroundColor: '#FFFFFF'
  96.             },
  97.             series: [{
  98.                 name: '',
  99.                 data: temperature
  100.                     }]
  101.         });
  102.     });
  103.   
  104. });
  105. </script>
  106. <title>折线图</title>
  107. </head>
  108. <body>
  109. <div id="test"> </div>
  110. </body>
  111. </html>
复制代码

本帖被以下淘专辑推荐:

  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22711

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-12-12 16:24:34 | 显示全部楼层
    chart = new Highcharts.Chart({ 图表初始化部分代码需要放在 $.ajax 回调函数里。

    去了解一下 JS 及 Ajax 相关的知识吧。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表