14

Google Chart APIを使用して折れ線グラフを表示していますが、通貨として表示するには数値が必要です。チャート自体では、通貨のように数字を表示することができましたが、マウスをポイントの上に置いてダイアログボックスを表示すると、指定どおりに数字が表示されません。

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            
            function drawChart() {
                
                var data = google.visualization.arrayToDataTable(<?php echo $data; ?>);

                
                var options = {
                    chartArea:{left:40,top:10},
                    pointSize: 6,
                    vAxis: {format:'$###,###,###.00'}, // Money format
                    legend: {position:'none'}



                };
                
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
                
            }
        </script>

この画像からわかるように、左側に表示される縦の列vAxis.formatは、上記のコードで指定された小数点を使用していますが、ダイアログボックスには小数点またはドル記号が表示されません（画面キャプチャ後にドル記号を追加しました） ）。

ダイアログボックスの番号を取得して、左揃えの垂直列の番号と同じように表示するにはどうすればよいですか？

データを通貨形式に入力するために使用しているPHP配列を更新しようとしましたが、単純な数字ではないため、Googleグラフは表示されません。

4

4 に答える 4

15

セルの生の値とフォーマットされた値の両方を指定するためのフォーマットがあります: チャートに値をロードするとき、例えばaddRow(['2012-08-31, 4]);それはそうでaddRow(['2012-08-31', {v: 4, f: '$4.00'}]);はありませんそれにリンクします。例の $data オブジェクトが生成される方法を変更してその書式を含めることはそれほど難しくありませんが、他の書式設定オプションもあります。

何らかの理由でJSでそのフォーマットを定義したい場合は、NumberFormatterを使用できます。

于 2012-09-11T19:56:33.953 に答える
7

これを試して：

var formatter = new google.visualization.NumberFormat({pattern:'###,###'} ); formatter.format(data, 1);

私にとってはうまくいきました。場所: Google Visualization API のカンマ区切りデータ

于 2012-11-28T17:56:01.487 に答える
3

非常に便利で、arrayToDataTable() メソッドと概念が似ている別のオプションは、次のような JavaScript リテラル初期化子の構文です。

var data = new google.visualization.DataTable(
                {
                    cols: [
                        {id: 'date', label: 'Date', type: 'string'},
                        {id: 'parnter1', label: 'Partner A', type: 'number'},
                        {id: 'partner2', label: 'Partner B', type: 'number'}
                    ],
                    rows: [
                        { c: [{ v: '06/2012' }, { v: 12345, f: '$12,345' }, { v: 98765, f: '$98,765'}] },
                        { c: [{ v: '07/2012' }, { v: 10123, f: '$10,123' }, { v: 123123, f: '$123,123'}] }
                    ]
                }
            );

https://google-developers.appspot.com/chart/interactive/docs/datatables_dataviews

于 2012-09-19T21:17:32.073 に答える