谷歌图表vAxis在右边 [英] google charts vAxis to the right

问题描述

我正在使用Google可视化

I'm using google visualization

var data2 = new google.visualization.DataTable();
        data2.addColumn('string', 'time');
        data2.addColumn('number', 'amount');
        data2.addColumn({ type: 'string', role: 'tooltip' });
        data2.addRows(rows_data);
        var options2 = {
            vAxis: { textPosition: 'none', title: '', textStyle: { fontName: 'arial'} },
            hAxis: { slantedText: false, textStyle: { color: '#E6EFFA' }, gridlines: { color: '#E6EFFA', count: 20} },
            backgroundColor: '#E6EFFA',
            legend: 'none',
            chartArea: { top: 0 },
            colors: ['#435988'],
            chartArea: { width: 800 }
        };
        chart2 = new google.visualization.LineChart(document.getElementById('chart_div_volume'));

我希望vAxis位置在右侧. 是否有可能 ?

I want the vAxis position to be on the right. is it possible ?

推荐答案

简短答案:是的，但这很棘手.

Short Answer: Yes, but it's tricky.

长答案:

您需要设置一个多轴图表.基本上，您可以创建一个没有标签或任何东西的虚拟轴，使其看起来像一个轴.然后，配置辅助轴.您创建一组虚拟值(隐藏)以放置在第一个轴上，并在第二个轴上绘制实际数据.

You need to set up a multi-axis chart. Basically, you create a dummy axis with no labels or anything to make it look like an axis. Then you configure a secondary axis. You create one set of dummy values (hidden) to put on the first axis, and plot your real data on the second.

这里是一个例子:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Dummy', 'Sales', 'Expenses'],
    ['2004',  0,   1000,      400],
    ['2005',  null,   1170,      460],
    ['2006',  null,   660,       1120],
    ['2007',  null,   1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    series: { 0: {targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0},
              1: {targetAxisIndex: 1},
              2: {targetAxisIndex: 1}
             },
    vAxes: {
      0: {textPosition: 'none'},
      1: {},
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('visualization'));
  chart.draw(data, options);
}

这篇关于谷歌图表vAxis在右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！