Question

我有一些问题，我用谷歌图表API绘制条形图。在我的任务中：具有最小数量的列必须是最高的，我不知道如何做到这一点。在这个例子中我们看到它如何工作jsfiddle.net/h2ysjmzk/但我需要不同的结果，如屏幕Expected result

Answer 1

对行值使用对象表示法，
您可以提供要绘制的值（v:），
和要显示的格式化值（f:）

{v: 0.1, f: '10'}

工具提示将显示格式化的值

使用这种方法，反转所有值
但允许显示实际值

请参阅以下工作片段，
使用来自小提琴的数据，
然后建立一个视图来反转值

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00'
  });

  var data = google.visualization.arrayToDataTable([
    ['Time of Day', 'Motivation Level', 'Energy Level'],
    [{v: [8, 0, 0], f: '8 am'}, 1, 0.25],
    [{v: [9, 0, 0], f: '9 am'}, 2, 0.5],
    [{v: [10, 0, 0], f:'10 am'}, 3, 1],
    [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
    [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
    [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
    [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
    [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
    [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
    [{v: [17, 0, 0], f: '5 pm'}, 10, 10]
  ]);

  // build view
  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns() - 1), function (index, row) {
    viewColumns.push({
      calc: function (dt, row) {
        var rowValue = dt.getValue(row, index + 1);
        var invertedValue = 0;
        if (rowValue !== 0) {
          invertedValue = 1 / rowValue;
        }
        return {
          v: invertedValue,
          f: formatNumber.formatValue(rowValue)
        };
      },
      label: data.getColumnLabel(index + 1),
      type: data.getColumnType(index + 1)
    });
  });
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var chart = new google.charts.Bar(document.getElementById('chart'));
  chart.draw(view, google.charts.Bar.convertOptions({
    legend: {
      position: 'none'
    },
    vAxis: {
      textStyle: {
        color: 'transparent'
      }
    }
  }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

如何使用谷歌图表api绘制条形图，其中最小数量更好，列需要更高

1 个答案: