Question

我正在尝试显示带有2个不同Y轴的图表，但我总是得到一个带有1个Y轴的图表。我正在阅读不同的解决方案，但没有任何工作...我认为问题是我有一个JSON数据表。这些数据的格式是：

{"cols":[{"label":null,"type":"number"},{"label":"I rated max","type":"number"},{"label":"Rdc max","type":"number"}],"rows":[{"c":[{"v":1},{"v":0.5},{"v":0.32}]},{"c":[{"v":1.5},{"v":0.63},{"v":0.76}]},...

我尝试使用vAxes选项，但它不起作用......有些想法？

谢谢！

编辑：我的完整代码是：

// Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
              title: 'I/R-L chart',
              hAxis: {title: 'L value [µH]', titleTextStyle: {color: 'red'} },
              //vAxis: {
                //  title: "I rated max/ Rdc max", 

                 // maxValue:1.5


              //},
               vAxes: { 0: {logScale: false}, 1: {logScale: false}},

                series:{

                   0:{targetAxisIndex:0},

                   1:{targetAxisIndex:0}},


            pointSize:8
      }

      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Answer 1

问题是双重的：

1）ScatterCharts不支持多个垂直轴。根据数据的结构（如果上面的示例DataTable代表您的数据，您的数据看起来很好），您可以使用LineChart模拟ScatterChart。您只需将“lineWidth”选项设置为0即可。 2）您需要为每个轴分配至少一个数据系列，否则右侧vAxis将不会绘制。

试试这个：

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(<?=$jsonTable?>);
    var options = {
        title: 'I/R-L chart',
        hAxis: {title: 'L value [µH]', titleTextStyle: {color: 'red'} },
        vAxes: { 0: {logScale: false}, 1: {logScale: false}},
        series:{
            0:{targetAxisIndex:0},
            1:{targetAxisIndex:1}
        },
        pointSize:8,
        lineWidth: 0
    }

    // Instantiate and draw our chart, passing in some options.
    // Do not forget to check your div ID
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

带有Json数据的多个Y轴Google图表

1 个答案: