Question

这是尝试解决LP图形问题。我想在同一个图上解决2个线性方程，但作为数据可视化的初学者，我发现很难解决我的问题。我失败的代码是这样的：

<html>
 <head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [ 0,      120],
      [ 80,      0]
    ]);
    var data2 = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [ 0,      140],
      [ 70,      0]
    ]);

    var options1 = {
      title: 'X and Y',
      hAxis: {title: 'Age' },
      vAxis: {title: 'Weight'},
      legend: 'none',
      trendlines: { 0: {} }
     };
    var options2 = {
      title: 'X and Y',
      hAxis: {title: 'Age' },
      vAxis: {title: 'Weight'},
      legend: 'none',
      trendlines: { 0: {} }
     };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
    chart.draw(data1, options1);
  }
     var chart = new     google.visualization.ScatterChart(document.getElementById('chart_div2'));
    chart.draw(data2, options2);
    }
    </script>
  </head>
   <body>
   <div id="chart_div1" style="width: 900px; height: 500px;"></div>
  <div id="chart_div2" style="width: 900px; height: 500px;"></div>
 </body>
  </html>

Answer 1

要在ScatterChart上获得第二组点，您只需要添加另一列数据：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Y1', 'Y2'],
        [0, 120, 140],
        [70, null, 0],
        [80, 0, null]
    ]);

    var options = {
        title: 'X and Y',
        hAxis: {title: 'Age' },
        vAxis: {title: 'Weight'},
        legend: 'none',
        trendlines: {0: {}, 1: {}}
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

插入null，其中数据系列没有给定X值的值.jsfiddle示例：http://jsfiddle.net/asgallant/n3EjL/

如果你想绘制两个图表，那么你就是在正确的轨道上，你只有一个语法错误：你的第二个图表在drawChart函数之外。如果您使用它，它可以工作：

function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [0, 120],
        [80, 0]
    ]);
    var data2 = google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [0, 140],
        [70, 0]
    ]);

    var options1 = {
        title: 'X and Y',
        hAxis: {title: 'Age' },
        vAxis: {title: 'Weight'},
        legend: 'none',
        trendlines: {0: {}, 1: {}}
    };

    var options2 = {
        title: 'X and Y',
        hAxis: {title: 'Age' },
        vAxis: {title: 'Weight'},
        legend: 'none',
        trendlines: {0: {}, 1: {}}
    };

    var chart1 = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
    chart1.draw(data1, options1);
    var chart2 = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
    chart2.draw(data2, options2);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

jsfiddle示例：http://jsfiddle.net/asgallant/n3EjL/2/

如何使用谷歌图表在同一图表上绘制多个数据点

1 个答案: