谷歌圖表vAxis向右

我使用谷歌可視化谷歌圖表vAxis向右

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位置在右邊。有可能嗎？

來源

2013-04-02 Haddar Macdasi

簡答：是的，但它很棘手。

龍答：

你需要建立一個多軸的圖表。基本上，你創建一個沒有標籤或任何東西的虛擬軸，使它看起來像一個軸。然後你配置一個輔助軸。您創建一組虛擬值（隱藏）放在第一個軸上，並在第二個軸上繪製您的實際數據。

下面是一個例子：

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); 
}

來源

2013-04-03 03:05:41 jmac

這個偉大的工程！謝謝。 – Martlark

@jmac BarChart的可能性相同嗎？ – Boris


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

 
     function drawVisualization() { 
 
      var data = new google.visualization.DataTable(); 
 
      data.addColumn('string', 'Productivity'); 
 
      data.addColumn('number', 'Composite'); 
 
      data.addColumn({ type: 'number', role: 'annotation' }); 
 
      data.addColumn('number', 'Average(N=5)'); 
 
      var compositeDataArry = []; 
 
      compositeDataArry.push(["Ravi", 11, 11, 5]); 
 
      compositeDataArry.push(["Wasif", 5, 5, 5]); 
 
      compositeDataArry.push(["Vipin", 2, 2, 5]); 
 
      compositeDataArry.push(["Ankur", 3, 3, 5]); 
 
      compositeDataArry.push(["Pankaj", 1, 1, 5]); 
 
      compositeDataArry.push(["Dheeraj", 4, 4, 5]); 
 

 
      data.addRows(compositeDataArry); 
 
      var options = { 
 
       title: 'My Chart', 
 
       titleTextStyle: { color: '#264158', fontSize: 24 }, 
 
       seriesType: 'bars', 
 
       annotations: { 
 
        alwaysOutside: true, 
 
        textStyle: { 
 
         color: '#000000', 
 
         fontSize: 15 
 
        } 
 
       }, 
 
       hAxis: { 
 
        slantedText: true, 
 
        slantedTextAngle: -45 
 
       }, 
 
       series: { 
 
        0: { targetAxisIndex: 0, }, 
 
        1: { targetAxisIndex: 1, type: 'line' } 
 
       }, 
 
       vAxes: { 
 
        0: { textPosition: 'none' }, 
 
        1: {} 
 
       }    
 
      }; 
 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
      chart.draw(data, options); 
 
      
 
     }

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

 

 
</head> 
 
<body> 
 
    <div id="chart_div" style="height: 500px; width: 100%"></div> 
 

 
</body> 
 
</html>

來源

2017-03-30 11:07:59

谷歌圖表vAxis向右

回答

相關問題