ハイストックハイチャート不規則なデータが間違ったxスケールになる

Question

不規則なデータがあります。

$(function() { 
    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'chart' 
    }, 
    xAxis: { 
    type: 'datetime' 
    }, 
    series: [{ 
    name: 'Volume', 
    data: chart_arr, 
    }] 
}); 
}); 

http://jsfiddle.net/KnTaw/9/

しかし、私は日にズームしhighstockを選択する必要がありますので、私は多くのデータを持っている：私はhighchartsを使用する場合、チャートはよく描きます。そして、奇妙なことが起きます.x軸は非線形になります。

$(function() { 
    var chart2 = new Highcharts.StockChart({ 
    chart: { 
     renderTo: 'chart2' 
    }, 
    rangeSelector: { 
     selected: 0 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    series: [{ 
     name: 'val', 
     data: chart_arr, 
     type : 'area', 
    }] 
    }); 
}); 

http://jsfiddle.net/Mc3mW/1/

時間半の範囲1月6日20のデータということに注意してください：00-20：30は、2日月11-13より多くのスペースを割り当てます。 （もちろんデータは同じです）

ハイストックのx軸を線形にするにはどうしたらいいですか？または、ハイチャートの下部ズームツールを有効にするにはどうすればよいですか？ありがとうございました。

Answer 1

あなたは、これがデフォルトでtrueで、falseにxAxis.ordinalプロパティを設定する必要があります。 Trueの値は、ポイントを一定の間隔で配置する必要があることを示します。スペース（ピクセル）およびFalse固定ポイントw.r.t.時間は

xAxis: {  
    ordinal: false 
} 

Linear x-axis | Highstock @ jsFiddle

Answer 2

HighCharts JavaScriptライブラリを使用してグラフをズームすることは可能です。あなたが設定する必要があるプロパティは、zoomType

は、ユーザーがマウスをドラッグしてズームすることができますdimentions何で決定しますです。 x、y、またはxyのいずれかになります。デフォルトは ""です。

ここには、例文hereがあります。特定の場所をズームするには、マウスの左ボタンを押したまま拡大する領域を選択します。

HTMLコード：

<div id="container" style="height: 400px"></div>​ 

のJavaScriptコード：また

$(function() { 
    var chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'container', 
            type: 'line', 
            zoomType: 'x' 
        }, 
         
        xAxis: { 
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
        }, 
         
        series: [{ 
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]         
        }] 
    }); 
});​ 

、「ズームをリセット」ボタンが自動的にズームイベントに示されており、それがチャートの操作どの部分に簡単ですされます押すと表示されます。

とにかく、ズーム設定、イベント、ボタンの詳細と例については、「ハイチャートオプションリファレンス」hereを参照してください。検索に「ズーム」と入力するだけです。

その他の質問：HighStock APIに従って「StockChart線形を作成する方法」では、チャートのデフォルトの種類は線形です。ここで発生しているのは、シリーズプロパティで設定したエリアのエリアです。ただ、このようで削除して、あなたの線形グラフを取得します：

$(function() { 
    var chart2 = new Highcharts.StockChart({ 
    chart: { 
     renderTo: 'chart2' 
    }, 
    rangeSelector: { 
     selected: 0 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    series: [{ 
     name: 'val', 
     data: chart_arr 
    }] 
    }); 
});