Question

Link to jsFiddle

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

//Input data
var data = [
  ['Data', 'CAT1', 'CAT2', 'CAT3', 'CAT4'],
  ['Provisions', 5, 0, 0, 0],
];

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
  var options = {
    colors: ['#00699B', '#087EB4', '#CBE7F7', '8A6996'],
    isStacked: true,
    chartArea: {
      width: '40%'
    },
    bar: {
      groupWidth: "40%"
    },
    //            tooltip: { isHtml: true },
    trigger: 'both',
    vAxis: {
      gridlines: {
        color: '#0000006b',
        minValue: 0,
        baseline: 0
      },
      format: "$ #,###"
    },

  };

  var dataTable = google.visualization.arrayToDataTable(data);

  //Formatters
  var intergerFormatter = new google.visualization.NumberFormat({
    groupingSymbol: ",",
    fractionDigits: 0
  });

  for (var i = 0; i < data[0].length; i++) {
    intergerFormatter.format(dataTable, i);
  }

  var view = new google.visualization.DataView(dataTable);
  var cols =   [0];
  for (var i = 1; i < data[0].length; i++) {
    cols.push({
      sourceColumn: i,
      type: "number",
      label: data[0][i]
    });
    cols.push({
      calc: createTooltip(i),
      type: "string",
      role: "tooltip",
    });
  }
  view.setColumns(cols);

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

  chart.draw(view, options);

  function createTooltip(col) {
    return function(dataTable, row) {
      var html = dataTable.getColumnLabel(col) + ":" + "\n";
      html += "4 " + dataTable.getValue(row, 0) + "\n";
      html += "$ " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + " total" + "\n";
      return html;
    };
  }
}

堆叠条形图表上的网格线未正确呈现。

根据数据，类别1记录了5美元，但是当它被渲染时，条形图略高于5美元。

有人可以建议修复吗？

Answer 1

删除选项 - ＆gt; format: "$ #,###" - 揭示问题

虽然勾号显示 - ＆gt; $ 5 - 实际使用的数字是 4.5

请参阅以下工作代码段...

＆＃13;

    google.charts.load('current', {
      'packages': ['corechart']
    });

    //Input data
    var data = [
      ['Data', 'CAT1', 'CAT2', 'CAT3', 'CAT4'],
      ['Provisions', 5, 0, 0, 0],
    ];

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
      var options = {
        colors: ['#00699B', '#087EB4', '#CBE7F7', '8A6996'],
        isStacked: true,
        chartArea: {
          width: '40%'
        },
        bar: {
          groupWidth: "40%"
        },
        //            tooltip: { isHtml: true },
        trigger: 'both',
        vAxis: {
          gridlines: {
            color: '#0000006b',
            minValue: 0,
            baseline: 0
          },
          //format: "$ #,###"
        },

      };

      var dataTable = google.visualization.arrayToDataTable(data);

      //Formatters
      var intergerFormatter = new google.visualization.NumberFormat({
        groupingSymbol: ",",
        fractionDigits: 0
      });

      for (var i = 0; i < data[0].length; i++) {
        intergerFormatter.format(dataTable, i);
      }

      var view = new google.visualization.DataView(dataTable);
      var cols =   [0];
      for (var i = 1; i < data[0].length; i++) {
        cols.push({
          sourceColumn: i,
          type: "number",
          label: data[0][i]
        });
        cols.push({
          calc: createTooltip(i),
          type: "string",
          role: "tooltip",
        });
      }
      view.setColumns(cols);

      var chart = new google.visualization.ColumnChart(document.getElementById('provision_chart'));

      chart.draw(view, options);

      function createTooltip(col) {
        return function(dataTable, row) {
          var html = dataTable.getColumnLabel(col) + ":" + "\n";
          html += "4 " + dataTable.getValue(row, 0) + "\n";
          html += "$ " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + " total" + "\n";
          return html;
        };
      }
    }

＆＃13;

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

＆＃13;

要更正，您可以为格式添加小数位 - ＆gt; $ #,##0.0

或在数组中提供您自己的vAxis.ticks - ＆gt; [0, 1, 2, 3, 4, 5, 6]

请参阅以下工作代码段...

＆＃13;

    google.charts.load('current', {
      'packages': ['corechart']
    });

    //Input data
    var data = [
      ['Data', 'CAT1', 'CAT2', 'CAT3', 'CAT4'],
      ['Provisions', 5, 0, 0, 0],
    ];

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
      var options = {
        colors: ['#00699B', '#087EB4', '#CBE7F7', '8A6996'],
        isStacked: true,
        chartArea: {
          width: '40%'
        },
        bar: {
          groupWidth: "40%"
        },
        //            tooltip: { isHtml: true },
        trigger: 'both',
        vAxis: {
          gridlines: {
            color: '#0000006b',
            minValue: 0,
            baseline: 0
          },
          format: "$ #,###",
          ticks: [0, 1, 2, 3, 4, 5, 6]
        },

      };

      var dataTable = google.visualization.arrayToDataTable(data);

      //Formatters
      var intergerFormatter = new google.visualization.NumberFormat({
        groupingSymbol: ",",
        fractionDigits: 0
      });

      for (var i = 0; i < data[0].length; i++) {
        intergerFormatter.format(dataTable, i);
      }

      var view = new google.visualization.DataView(dataTable);
      var cols =   [0];
      for (var i = 1; i < data[0].length; i++) {
        cols.push({
          sourceColumn: i,
          type: "number",
          label: data[0][i]
        });
        cols.push({
          calc: createTooltip(i),
          type: "string",
          role: "tooltip",
        });
      }
      view.setColumns(cols);

      var chart = new google.visualization.ColumnChart(document.getElementById('provision_chart'));

      chart.draw(view, options);

      function createTooltip(col) {
        return function(dataTable, row) {
          var html = dataTable.getColumnLabel(col) + ":" + "\n";
          html += "4 " + dataTable.getValue(row, 0) + "\n";
          html += "$ " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + " total" + "\n";
          return html;
        };
      }
    }

＆＃13;

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

＆＃13;

getColumnRange(colIndex)方法可以帮助动态构建刻度

该方法返回一个对象{}，其中包含min和max的属性，用于提供的列索引

请参阅以下工作代码段以获取示例...

＆＃13;

    google.charts.load('current', {
      'packages': ['corechart']
    });

    //Input data
    var data = [
      ['Data', 'CAT1', 'CAT2', 'CAT3', 'CAT4'],
      ['Provisions', 5, 0, 0, 0],
    ];

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
      var options = {
        colors: ['#00699B', '#087EB4', '#CBE7F7', '8A6996'],
        isStacked: true,
        chartArea: {
          width: '40%'
        },
        bar: {
          groupWidth: "40%"
        },
        //            tooltip: { isHtml: true },
        trigger: 'both',
        vAxis: {
          gridlines: {
            color: '#0000006b',
            minValue: 0,
            baseline: 0
          },
          format: "$ #,###"
        },

      };

      var dataTable = google.visualization.arrayToDataTable(data);

      //Formatters
      var intergerFormatter = new google.visualization.NumberFormat({
        groupingSymbol: ",",
        fractionDigits: 0
      });

      for (var i = 0; i < data[0].length; i++) {
        intergerFormatter.format(dataTable, i);
      }

      var view = new google.visualization.DataView(dataTable);
      var cols = [0];

      var ticksY = [];
      var maxY = null;
      var minY = null;
      for (var i = 1; i < view.getNumberOfColumns(); i++) {
        var range = view.getColumnRange(i);
        if (maxY === null) {
          maxY = Math.ceil(range.max);
        } else {
          maxY = Math.max(maxY, Math.ceil(range.max));
        }
        if (minY === null) {
          minY = Math.floor(range.min);
        } else {
          minY = Math.min(minY, Math.floor(range.min));
        }
      }
      for (var i = minY; i <= maxY + 1; i++) {
        ticksY.push(i);
      }
      options.vAxis.ticks = ticksY;

      for (var i = 1; i < data[0].length; i++) {
        cols.push({
          sourceColumn: i,
          type: "number",
          label: data[0][i]
        });
        cols.push({
          calc: createTooltip(i),
          type: "string",
          role: "tooltip",
        });
      }
      view.setColumns(cols);

      var chart = new google.visualization.ColumnChart(document.getElementById('provision_chart'));

      chart.draw(view, options);

      function createTooltip(col) {
        return function(dataTable, row) {
          var html = dataTable.getColumnLabel(col) + ":" + "\n";
          html += "4 " + dataTable.getValue(row, 0) + "\n";
          html += "$ " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + " total" + "\n";
          return html;
        };
      }
    }

＆＃13;

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

＆＃13;

谷歌图表上的网格线不按数据呈现

1 个答案: