Javascript 谷歌圖表設置

Question

我有以下圖表。 我希望圖表旁邊和圖表上的單位都有一個空的“”作為千位分隔符。 我希望數字后跟單位，例如“$100,000”。 有什么建議嗎？

[http://jsfiddle.net/fvL726r9/][1]

                <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


                <div class="Container50" id="piechart" style="width: 800px; height: 500px;"/>

                        google.charts.load('current', {'packages': ['corechart']});
                        google.charts.setOnLoadCallback(drawChart);

                        function drawChart() {

                            var data = google.visualization.arrayToDataTable([
                                ['Genre', 'Vk', {role: 'annotation'}, 'Sta', {role: 'annotation'}, 'Va', { role: 'annotation' } ],
                                ['Ps', 360000, 'Vk', 82000, 'Sta', 200000, 'Vy'],
                                ['Ds', 360000, 'Vk', 82000, 'Sta', 200000, 'Vy']

                            ]);

                            var view = new google.visualization.DataView(data);

                            view.setColumns([0,
                                1, {
                                    calc: function (dt, row) {
                                        return dt.getValue(row, 1);
                                    },
                                    type: "number",
                                    role: "annotation",

                                },
                                3, {
                                    calc: function (dt, row) {
                                        return dt.getValue(row, 3);
                                    },
                                    type: "number",
                                    role: "annotation"
                                },
                                5, {
                                    calc: function (dt, row) {
                                        return dt.getValue(row, 5);
                                    },
                                    type: "number",
                                    role: "annotation"
                                },

                            ]);

                            var formatter = new google.visualization.NumberFormat({
                                groupingSymbol: ' ',
                                suffix: ' Kč',
                                fractionDigits: 0,
                                pattern: '# Kč'

                            });
                            formatter.format(view, 5);

                            var options = {
                                title: '',
                                isStacked: true,
                                //pieSliceText: 'value',
                                legend: { position: 'right'},
                                chartArea: {
                                    left: "10%",
                                    top: "4%",
                                    height: "92%",
                                    width: "70%"
                                },
                                colors: ['#3366CC','#DC3912','#23C228', '#000000'],
                            };

                            var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));

                            chart.draw(view, options);

                            document.getElementById("j_idt26:chart").value = chart.getImageURI();
                        }

Answer 1

首先，格式化程序將不適用於數據視圖。
因此您需要在構建視圖之前格式化數據表。

下，不存在將允許空格字符被用作分隔的圖案。
從格式化程序中刪除模式選項。

  var formatter = new google.visualization.NumberFormat({
    groupingSymbol: ' ',
    suffix: ' Kč',
    fractionDigits: 0,
    prefix: '$'
  });

並且您需要格式化所有數字列...

  formatter.format(data, 1);
  formatter.format(data, 2);
  formatter.format(data, 3);

接下來，為了格式化注釋，您需要使用格式化程序的formatValue方法。
並將注釋類型更改為'string'

  view.setColumns([0,
    1, {
      calc: function(dt, row) {
        return formatter.formatValue(dt.getValue(row, 1));  // <-- use formatValue
      },
      type: "string",
      role: "annotation",
    },

並且由於您要在數據視圖中添加注釋，
注釋列可以從數據表中刪除。

最后，由於模式不起作用，
格式化 v 軸標簽的唯一方法是提供您自己的自定義刻度。

ticks選項需要一個值數組。
在這種情況下，我們將需要使用對象表示法，
提供刻度的值 ( v: )，
和格式化的值 ( f: )

ticks: [{v: 0, v: '0'}, {v: 100000, f: '100 000 Kč'}, {v: 200000, f: '200 000 Kč'}, ...]

請參閱以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Genre', 'Vk', 'Sta', 'Va'], ['Ps', 360000, 82000, 200000], ['Ds', 360000, 82000, 200000] ]); var formatter = new google.visualization.NumberFormat({ groupingSymbol: ' ', suffix: ' Kč', fractionDigits: 0, prefix: '$' }); formatter.format(data, 1); formatter.format(data, 2); formatter.format(data, 3); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: function(dt, row) { return formatter.formatValue(dt.getValue(row, 1)); }, type: "string", role: "annotation", }, 2, { calc: function(dt, row) { return formatter.formatValue(dt.getValue(row, 2)); }, type: "string", role: "annotation" }, 3, { calc: function(dt, row) { return formatter.formatValue(dt.getValue(row, 3)); }, type: "string", role: "annotation" }, ]); var options = { title: '', isStacked: true, //pieSliceText: 'value', legend: { position: 'right' }, chartArea: { left: "12%", top: "4%", height: "92%", width: "70%" }, colors: ['#3366CC', '#DC3912', '#23C228', '#000000'], vAxis: { ticks: [{v: 0, v: '0'}, {v: 100000, f: '$100 000 Kč'}, {v: 200000, f: '$200 000 Kč'}, {v: 300000, f: '$300 000 Kč'}, {v: 400000, f: '$400 000 Kč'}, {v: 500000, f: '$500 000 Kč'}, {v: 600000, f: '$600 000 Kč'}, {v: 700000, f: '$700 000 Kč'}] } }; var chart = new google.visualization.ColumnChart(document.getElementById('piechart')); chart.draw(view, options); document.getElementById("j_idt26:chart").value = chart.getImageURI(); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="Container50" id="piechart" style="width: 800px; height: 500px;" />