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

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

javascript charts google-visualization

Javascript 如何使用谷歌图表在同一图表上绘制多个数据点,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,这是解决LP图形问题的一次尝试。我想在同一张图上解两个线性方程组，但作为数据可视化的初学者，我发现很难解决我的问题。我失败的代码如下所示： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualizatio

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

<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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data1=google.visualization.arrayToDataTable([
['X'，'Y']，
[ 0,      120],
[ 80,      0]
]);
var data2=google.visualization.arrayToDataTable([
['X'，'Y']，
[ 0,      140],
[ 70,      0]
]);
变量选项1={
标题：“X和Y”，
哈克斯：{头衔：'年龄'}，
变量：{title:'Weight'}，
图例：“无”，
趋势线：{0:{}
};
var选项2={
标题：“X和Y”，
哈克斯：{头衔：'年龄'}，
变量：{title:'Weight'}，
图例：“无”，
趋势线：{0:{}
};
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div1'））；
图表绘制（数据1，选项1）；
}
var chart=new google.visualization.ScatterChart（document.getElementById（'chart_div2'））；
图表绘制（数据2，选项2）；
}

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

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示例：

如果您想要绘制两个图表，那么您的思路是正确的，您只需要有一个语法错误：您的第二个图表在

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});

JSFIDLE示例：