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

首先，格式化程序不适用于数据视图。
因此您需要在构建视图之前格式化数据表。

接下来，没有 模式 允许将空格字符用作分隔符。
从格式化程序中删除 pattern 选项。

  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č'}, ...]

请参阅以下工作 sn-p...

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;" />