2011-07-20 35 views

回答

5

您可以通過series選項解決此問題,並指定系列[0]的虛擬數據系列。像這樣:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'xAxis'); 
     data.addColumn('number', 'dummySeries'); 
     data.addColumn('number', 'realSeries'); 

     data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below 
     data.addRow(...iterate & add the rest of your data); 

     new google.visualization.LineChart(document.getElementById('graphdiv')). 
      draw(data, {curveType: 'function', 
         series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth 
       ); 
     } 

     google.setOnLoadCallback(drawVisualization); 
    </script> 
0

 function singleUserChart() { 
 
      google.charts.load('current', { packages: ['corechart', 'bar'] }); 
 
      google.charts.setOnLoadCallback(drawAnnotations); 
 

 
      function drawAnnotations() { 
 
       var dataPercentage = new google.visualization.DataTable(); 
 
       dataPercentage.addColumn('string', 'Productivity'); 
 
       dataPercentage.addColumn('number', 'Ravi'); 
 
       dataPercentage.addColumn({ type: 'string', role: 'annotation' }); 
 
       dataPercentage.addColumn('number', 'Avg Data'); 
 
       dataPercentage.addColumn({ type: 'string', role: 'annotation' }); 
 

 
       dataPercentage.addRows([ 
 
        ['%Score1', 12, '12%', 15, '15%'], 
 
        ['%Score2', 25, '25%', 21, '21%'] 
 
       ]); 
 
       singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450); 
 
      } 
 
     } 
 
     function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) { 
 
      var options = { 
 
       annotations: { 
 
        alwaysOutside: true, 
 
        textStyle: { 
 
         fontSize: 15, 
 
         color: '#000', 
 
         auraColor: 'none' 
 
        } 
 
       }, 
 
       vAxis: { format: (isShowPercent == true) ? '#\'%\'' : '', ticks :[0,10,20,30,40,50]}, 
 
       hAxis: { 
 
        slantedText: true, 
 
        slantedTextAngle: -45, 
 
        textStyle: { fontSize: 11 } 
 
       }, 
 
       series: { 
 
        0: { targetAxisIndex: 0, }, 
 
        1: { targetAxisIndex: 1, } 
 
       }, 
 
       vAxes: { 
 
        0: { textPosition: 'none' }, 
 
        1: {} 
 
       }, 
 
       legend: { position: 'top' }, 
 
       width: chartWidth, 
 
       height: 400 
 
      }; 
 

 
      var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId)); 
 
      chart.draw(chartData, options); 
 
     } 
 
     singleUserChart(); 
 
<html> 
 
<head> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
</head> 
 
<body> 
 
    <div id="individualUserPercentageChart" style="height: 500px; width: 100%"></div> 
 
</body> 
 
</html>

enter image description here

相關問題