2

私はこれで数時間サークルに参加しており、同様のスタックオーバーフロースレッドとハイチャートドキュメントをすべて使い果たしたので、誰かが助けてくれることを願っています.

性別を分けて円グラフをプロットしようとしています。以前に折れ線グラフを使用したことがあるので、次のような x 軸と y 軸の形式のデータがありました。

[{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},{"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}]

これは私をどこかに連れて行っていました.jsonをタップしてintを引き出すことができましたが、私の人生では数字に関連付けられたタイトルを取得できませんでした...

function genderData() {
 $.getJSON('/statsboard/gender', function(data_g) {
    $.each(data_g, function(key_g, val_g) {
        obj_g = val_g;
         genderChart.series[0].addPoint(parseInt(obj_g.x));

        //genderChart.xAxis[0].categories.push(obj_g.y);
    });
 });
}

次に、次のように関数enderDataを呼び出しました。

genderChart = new Highcharts.Chart({
        chart: {
            renderTo: 'gender',
            events: {
                load: genderData
            }
        }
        title: {
            text: 'Gender Split'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            },
        },
        series: [{
            type: 'pie',
            name: 'Gender Split',
            data: []
        }]
    });

だから私は正確なチャートになりましたが、ラベルがなく、デフォルトで「スライス」になります...

とても近いですが、葉巻はありません;-)

ドキュメントに従って次の形式を返すようにサーバー側のコードを変更しました:-)、次を返すようになりました:

[{"Mr":"145"},{"Miss":"43"},{"Mrs":"18"},{"Ms":"2"}]

これは私にはかなり適切に見えますが、残念ながら、js コードでこれに対応しようとすると、すべてがバラバラになります。

私はこれを見てきました: 円グラフ (HighCharts) のデータをフォーマットする JSON パーサーを書く

しかし、私の状況に合わせてここで練習を適用することはできません..誰か助けてもらえますか?

4

4 に答える 4

3

フォーム:

[{"name": "Mr", "y": 145}, ...]

また

[["Mr", 145], ...]

動作します。2 番目の形式は、オブジェクトの配列ではなく、配列の配列であることに注意してください (よくわかりました)。

詳細については、basic-pie のデモ(表示オプションをクリックして下にスクロール)、series.data ドキュメント、およびseries.addPoint ドキュメントを参照してください。

サーバー側が上記の 2 つの形式のいずれかでデータを返すようにする場合は、次のようにするだけです。

function genderData() {
  $.getJSON('/statsboard/gender', function(data_g) {
    genderChart.series[0].setData(data_g, true);
  });
}
于 2012-10-16T19:33:41.487 に答える
2

次のようにポイントを設定できます。

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });
于 2012-10-16T19:20:07.307 に答える
1

キーとして「名前」と「y」を持つようにJsonを再配置することで、私は進歩することができました：

[{"name":"Mr","y":"145"},{"name":"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]

次に、json データをループし、JS の関数 parseInt() を使用して「y」値を int として解析することで、目的の結果を得ることができました...

function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
$.each(data_g, function(key_g, val_g) {
    obj_g = val_g;
     genderChart.series[0].addPoint({
        name: obj_g.name,
        y: parseInt(obj_g.y)
});
console.log(obj_g.y)
});
});
}
于 2012-10-17T12:35:56.170 に答える