0

私はハイストックを使用していますが、任意の数値から始まる列シリーズの y 値をプロットできる方法があるかどうか疑問に思っています。例えば。最初のエントリ yAxis 値が 1,000 の NU (New Users) という列シリーズがあります。現在、その最初のエントリは範囲 [0, 1,000] から yAxis にプロットされます。しかし、代わりに [5,000, 6,000] からプロットしたいと思います。

これが必要な理由は、NU が基本的に DAU (Daily Active Users) と呼ばれる別の列とは別のものであり、そのように表示されるようにしたいからです。DAU 列シリーズの最初のエントリの Y 値は 6,000 で、6,000 - 1,000 は 5,000 です。したがって、この NU のエントリは 5,000 から開始したいと思います。

これが私がこれまでに持っているものです

http://jsfiddle.net/6JACr/2/

DAU を (元の DAU - NU) としてプロットし、DAU の上に NU をスタックするつもりでしたが、これはシリーズが DAU に対して誤った値を保持していることを意味します。

これが私のコードです

    $(document).ready(function() {

    var all_series = [];
    var accu_series;
    var accu_data = [];
    var pccu_series = [];
    var pccu_data = [];
    var dau_series;
    var dau_data = [];
    var nu_series;
    var nu_data = [];


    function draw_charts() {

        $('#container').highcharts('StockChart', {

            rangeSelector : {
                selected : 1,
                buttons: [{
                    type: 'week',
                    count: 1,
                    text: '1w'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'month',
                    count: 3,
                    text: '3m'
                }, {
                    type: 'month',
                    count: 6,
                    text: '6m'
                }, {
                    type: 'ytd',
                    text: 'YTD'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }]
            },

            plotOptions: {
                column: {
                    grouping: false
                }
            },

            yAxis: [{
            // Primary Y-Axis
                labels:{
                    align:'right',
                    x:-10
                },
                lineWidth : 1,
                offset : 0
            }, {
            // Secondary Y-Axis
            opposite: true
            }],

            series : all_series

        });
    }

    //Function that takes a record and fills the series data with that record
    function fill_data(index, record) {
        var date = new Date(record['dailyDate']);
        var utc_date = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
        accu_data[index] = [utc_date, parseFloat(record['accu'])];
        dau_data[index] = [utc_date, parseFloat(record['dau'])];
        nu_data[index] = [utc_date, parseFloat(record['users'])];
    }

    // //Function that sets up the series data for plotting
    function fill_series() {
        dau_series = {
                name: "DAU",
                type: "column",
                data: dau_data,
                stack: 0
        };
        all_series[0] = dau_series;
        nu_series = {
                name: "NU",
                type: "column",
                data: nu_data,
                stack: 0
        };
        all_series[1] = nu_series;
    }

    //Pull data from API, format it, and store into the series arrays
    (function() {
        var result = '[{"accounts":"1668","accu":"568","activePayingRate":"1.97757","activePayingUsers":"854","activeUsers":"4905","area":"1","arpu":"34.6908","company":"45","dailyDate":"2013-08-06","dau":"6000","lost":"87","newUser":"0","paying":"96","payingRate":"1.53724","pccu":"747.0","registration":"572","sales":"3305.01","server":"1","users":"1000"},{"accounts":"1554","accu":"497","activePayingRate":"2.18398","activePayingUsers":"833","activeUsers":"4533","area":"1","arpu":"34.7479","company":"45","dailyDate":"2013-08-07","dau":"5873","lost":"89","newUser":"0","paying":"96","payingRate":"1.68568","pccu":"759.0","registration":"483","sales":"3300.04","server":"1","users":"1209"}]';
        var json_result = JSON.parse(result);
        $.each(json_result, function(index, record) {
            fill_data(index,record);
        });
        fill_series();
        draw_charts();

    })();


});
4

1 に答える 1

1

lowたとえば、列にプロパティを使用できます。 http://jsfiddle.net/6JACr/4/

適切なツールチップを表示するには、次のようなプロパティを追加valし、pointFormat を使用して表示します。

注: dataGrouping が使用される場合、カスタム プロパティは削除されます。その場合、独自のツールチップ フォーマッタを作成して、必要なものを表示することをお勧めします。

于 2013-09-16T12:01:16.940 に答える