Question

我正在开发一个双Y轴线图，它在Y轴上同时具有高度和重量，日期显示在X轴上：

我从我的MYSQL数据库中提取数据并将其编码为json并将其传递给我绘制图表的函数，如下所示：

['2016-07-27',51,3.4],['2016-08-03',52,4],['2016-08-10',53,5],['2016-08-17',54,6],['2016-08-24',55,7],['2016-08-31',56,8],

从我的php位返回的Json看起来像这样：

context 'with valid provider data' do
  before { session["devise.provider_data"] = { provider: 'twitter', uid: '123456' } }
  it "sends email confirmation" do
    expect{ post :create, authorization: { email: "user@email.com" } }.to change(ActionMailer::Base.deliveries, :count).by(1)
  end
end

我的输出如下：

如上所示，我只获得一个Y轴（高度），我的图表轴没有标注相应的名称

希望被指向正确的方向

Answer 1

用于构建 Dual-Y Chart 的问题中使用的特定配置选项仅适用于材料图表 - ＆gt; google.charts.Line

var optionsMatl = {
  title: 'Height-Weight graph',
  width: 900,
  height: 500,
  series: {
    0: {axis: 'Height'},
    1: {axis: 'Weight'}
  },
  axes: {
    y: {
      Height: {label: 'Height (cm)'},
      Weight: {label: 'Weight (kg)'}
    }
  }
};

需要一组不同的选项来构建 Dual-Y Chart 在经典图表中 - ＆gt; google.visualization.LineChart

var optionsCore = {
  title: 'Height-Weight graph',
  width: 900,
  height: 500,
  series: {
    1: {
      targetAxisIndex: 1
    }
  },
  vAxes: {
    0: {
      title: 'Height (cm)'
    },
    1: {
     title: 'Weight (kg)'
    }
  },
  theme: 'material'
};

来自Dual-Y Charts ...

的文档

在材料代码...中，轴和系列选项一起指定图表的双Y外观。系列选项指定每个轴使用哪个轴。轴选项然后使该图表成为双Y图表。

在Classic代码中，这略有不同。您将使用vAxes选项（或水平方向图表上的hAxes）而不是轴选项。此外，您将使用索引号来使用targetAxisIndex选项来协调与轴的系列，而不是使用名称。

请参阅以下工作代码段，其中同时绘制...

google.charts.load('current', {packages:['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Height');
  data.addColumn('number', 'Weight')
  data.addRows([
    ['2016-07-27',51,3.4],
    ['2016-08-03',52,4],
    ['2016-08-10',53,5],
    ['2016-08-17',54,6],
    ['2016-08-24',55,7],
    ['2016-08-31',56,8]
  ]);

    var optionsMatl = {
      title: 'Height-Weight graph',
      width: 900,
      height: 500,
      series: {
        0: {axis: 'Height'},
        1: {axis: 'Weight'}
      },
      axes: {
        y: {
          Height: {label: 'Height (cm)'},
          Weight: {label: 'Weight (kg)'}
        }
      }
    };

  var chartMatl = new google.charts.Line(document.getElementById('chart_div_matl'));
  chartMatl.draw(data, google.charts.Line.convertOptions(optionsMatl));

    var optionsCore = {
      title: 'Height-Weight graph',
      width: 900,
      height: 500,
      legend: {
        position: 'top',
        alignment: 'end'
      },
      series: {
        1: {
          targetAxisIndex: 1
        }
      },
      vAxes: {
        0: {
          title: 'Height (cm)',
        },
        1: {
         title: 'Weight (kg)'
        }
      },
      theme: 'material'
    };

  var chartCore = new google.visualization.LineChart(document.getElementById('chart_div_core'));
  chartCore.draw(data, optionsCore);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material Chart</div>
<div id="chart_div_matl"></div>
<div>Core Chart</div>
<div id="chart_div_core"></div>

谷歌线图双Y轴问题

1 个答案: