谷歌图表的双 Y 轴刻度

Question

我正在尝试为双 y 轴折线图设置刻度，但要么图无法加载，要么加载完全相同。任何帮助将不胜感激

目标是设置价格刻度：[0.002, 0.004。0.006。0.008]，音量增加1000

也有价格问题，例如：0.00242、0.00521 都显示为 0.1

<?php
$sql = "SELECT Timestamp, LastPrice, Volume FROM vol";
$result = $dbconnect->query($sql);
?> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
   
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

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

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');
		  
		  
		  
        var data = google.visualization.arrayToDataTable([
                ['Timestamp','LastPrice','Volume'],
                <?php
                    while($row = mysqli_fetch_assoc($result)){
                        echo "[           '".$row["Timestamp"]."', ".$row["LastPrice"].", ".$row["Volume"].",    ],";
                    }
					echo $row["LastPrice"];
                ?>
        ]);

        var materialOptions = {
			
		chart: {
          
        },
        width: 600,
        height: 300,
		
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'LastPrice' },
          1: {axis: 'BaseVolume'}
        },
		
		vAxis: {1: {ticks:[0, 0.002, 0.004, 0.006]} },
		
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            LastPrice: {label: 'Price'}, 
            BaseVolume: {label: 'Volume'}
			
          }
        }
		
      };

     

      function drawMaterialChart() {
        var materialChart = new google.charts.Line(chartDiv);
        materialChart.draw(data, materialOptions);
        button.innerText = 'Classic';
        button.onclick = drawClassicChart;
      }


      drawMaterialChart();

    }
	
</script>

Answer 1

材料图表不支持多种配置选项，包括...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks

请参阅 -->材料图表功能奇偶校验的跟踪问题

相反，建议使用带有以下选项的经典图表...

theme: 'material'

对于双 y 轴图表，使用series选项指定目标轴

  series: {
    1: {
      targetAxisIndex: 1,
    }
  },

使用vAxes带有e 的选项来指定ticks每个 y 轴

  vAxes: {
    0: {
      ticks:[0, 1000, 2000, 3000],
      title: 'Last Price'
    },
    1: {
      ticks:[0, 0.002, 0.004, 0.006],
      title: 'Base Volume'
    }
  }

请参阅以下工作片段...

  series: {
    1: {
      targetAxisIndex: 1,
    }
  },

  vAxes: {
    0: {
      ticks:[0, 1000, 2000, 3000],
      title: 'Last Price'
    },
    1: {
      ticks:[0, 0.002, 0.004, 0.006],
      title: 'Base Volume'
    }
  }