javascript - Google Charts 的双 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

Material 图表不支持多个配置选项，包括...

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

参见 --> Tracking Issue for Material Chart Feature Parity

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

主题:'material'

---

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

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

使用选项 vAxes 和 e，为每个 y 轴指定 ticks

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

---

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

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'x', type: 'string'},
        {label: 'y0', type: 'number'},
        {label: 'y1', type: 'number'}
      ],
      rows: [
        {c:[{v: 'row 0'}, {v: 1800}, {v: 0.00242}]},
        {c:[{v: 'row 1'}, {v: 2200}, {v: 0.00521}]},
        {c:[{v: 'row 2'}, {v: 2800}, {v: 0.00343}]},
        {c:[{v: 'row 3'}, {v: 2800}, {v: 0.00441}]},
        {c:[{v: 'row 4'}, {v: 2300}, {v: 0.00532}]}
      ]
    });

    var container = document.getElementById('chart');
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, {
      width: 600,
      height: 300,
      series: {
        1: {
          targetAxisIndex: 1,
        }
      },
      theme: 'material',
      vAxes: {
        0: {
          ticks:[0, 1000, 2000, 3000],
          title: 'Last Price'
        },
        1: {
          ticks:[0, 0.002, 0.004, 0.006],
          title: 'Base Volume'
        }
      }
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>