1

我试图显示一个带有 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);
    }
4

1 回答 1

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);
}
于 2013-07-25T16:09:36.370 回答