1

体重計を作っています。JSON 経由でグラフのデータを取得しますが、問題は xAxis のデータがなく、日付のみであるということです。取得するデータの例を次に示します。

[
    {"Date":"2011-03-02","y":"180"},
    {"Date":"2011-03-03","y":"250"},
    {"Date":"2011-03-09","y":"185"},
    {"Date":"2011-03-03","y":"300"}
]

データを取得してチャートをレンダリングする方法は次のとおりです。

<script type="text/javascript">
    var chart;

    function requestData() {
        $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
            function (data) {
                var series = chart.series[0];
                series.setData(data);
            }
        );
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'contain',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 25,
                events: { load: requestData }
            },
            title: {
                text: 'Your Weight History',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Fitness',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                text: '-weight -Pounds '
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +' -Pounds';
            }
        },
        legend: {
            layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Data1',
                data: []
            }]
        });
    }); 
</script>
4

2 に答える 2

1

残念ながら、指定した方法で x、y 位置にデータ ポイントを直接描画することはできません。を呼び出すときseries.setData(data)、データは次の 3 つの形式のいずれかである必要があります。

  • y 値の配列 (例: data = [0,1,2,3])
  • 形式の配列オブジェクトの配列[x, y](例: [[0,0], [1,1], [2,2]])
  • Point オブジェクトの配列

やりたいことを行うには、一連のplotOptionspointStartで説明されているようにとを使用するか、日付を整数 (ミリ秒) に変換し、x 軸のタイプを「datetime」に設定する必要があります。pointInterval

于 2011-03-07T17:19:53.297 に答える
0

これは@NT3RPの回答に沿ったものですが、データを解析およびソートしてハイチャートに適したものにする方法の例を次に示します。

function requestData() {
    var chart = this;
     $.getJSON('<?php echo Dispatcher::baseUrl();?>/logs/feed_data', 
            function (data) {
                 var series = chart.series[0];
                 var procData = $.map(data, function(item){
                     return [[Date.parse(item.Date), parseInt(item.y, 10)]];          
                 });
                 procData.sort(function(a, b){
                     return a[0] - b[0];            
                 });
                 series.setData(procData);
      });
}

$(document).ready(function() {
    new Highcharts.Chart({
        chart: {
            renderTo: 'contain',
            defaultSeriesType: 'line',
            marginRight: 130,
            marginBottom: 25,
            events: { load: requestData }
        },
        title: {
            text: 'Your Weight History',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: Fitness',
            x: -20
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
            text: '-weight -Pounds '
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.series.name +'</b><br/>'+
            this.x +': '+ this.y +' -Pounds';
        }
    },
    legend: {
        layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Data1',
            data: []
        }]
    });
}); ​

おそらくツールチップの日付をフォーマットするために使用したいと思うでしょうHighcharts.numberFormatterが、私はjsfiddleにそれを含めませんでした.

于 2012-05-31T13:47:39.017 に答える