2016-08-08 10 views
0

Web APIから受け取ったJSONからグラフを作成しようとしています。日付の代わりにティックナンバーを表示するハイチャート

リファクタリングを開始することにしました。 しばらくして、私はxAxisに日付が表示されなくなったことに気付きましたが、代わりにダニを表示しているようです。 私はJavaScriptで非常に慣れていないし、ハイチャートではそれ以上のことがあるので、間違いを見つけられない。

High Charts showing ticks. http://mortentoudahl.dk/images/highchartsBug.png

私はオプションオブジェクトを作成し、インスタンス化時にhighchartsに渡し、ここで見つけるの指示に従ってたんでした変更: http://www.highcharts.com/docs/getting-started/how-to-set-options 私はそのリンクの最後のコードブロックに私のコードを比較するとオプションオブジェクトを除いて、同じであるように見えます。

var pm10 = []; 
 
var pm25 = []; 
 

 

 
var options = { 
 
    chart: { 
 
    zoomType: 'x', 
 
    renderTo: 'container' 
 
    }, 
 
    title: { 
 
    text: "Compounds in the air at HCAB" 
 
    }, 
 
    subtitle: { 
 
    text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : "Pinch the chart to zoom in" 
 
    }, 
 
    xAxix: { 
 
    type: 'datetime' 
 
    }, 
 
    yAxis: { 
 
    title: { 
 
     text: 'µg/m³' 
 
    } 
 
    }, 
 
    series: [{ 
 
    name: 'Particles less than 2.5 µm', 
 
    data: pm25, 
 
    pointStart: Date.UTC(2016, 5, 8), 
 
    pointInterval: 86400 * 1000 // One day 
 
    }, { 
 
    name: 'Particles less than 10 µm', 
 
    data: pm10, 
 
    pointStart: Date.UTC(2016, 5, 8), 
 
    pointInterval: 86400 * 1000 // One day 
 
    }] 
 
}; 
 

 
function ReverseAndSetArrays(data) { 
 
    $.each(data.reverse(), function(key, value) { 
 
    if ("PM10b" in value) { 
 
     pm10.push(value["PM10b"]); 
 
    }; 
 
    if (!("PM10b" in value)) { 
 
     pm10.push(null); 
 
    }; 
 
    if ("PM25b" in value) { 
 
     pm25.push(value["PM25b"]); 
 
    }; 
 
    if (!("PM25b" in value)) { 
 
     pm25.push(null); 
 
    }; 
 
    }); 
 
}; 
 

 
var url = "super secret url"; 
 
$.getJSON(url, function(data) { 
 
    ReverseAndSetArrays(data); 
 
    var chart = new Highcharts.Chart(options); 
 
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container"></div>

+0

、 xAxixではありません。 –

答えて

1

あなたのオプションで次の構成オブジェクトが正しくありません。

xAxix: { 
    type: 'datetime' 
} 

それがあるべき:あなたのオプションでX軸オブジェクトを使用する必要が

xAxis: { 
    type: 'datetime' 
} 
+0

Arghh - 私はここに投稿することを決定する前にこれを主演していました。気づいてくれてありがとう –

関連する問題