Question

我有一个加载了一些json数据的谷歌折线图。我现在需要弄清楚如何动态地向该图表添加另一个点，但是与加载时绘制的线分开。

到目前为止，这是我的代码：

function drawchart() {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');

  for (var i = 0; i < chartdatax.length; i++) {
      chartData.addRow([parseFloat(chartdatax[i]), parseFloat(chartdatay[i])]);
      };

   var options2 = {
       height: 500,
       hAxis: {
          title: 'Arm C.G',
          gridlines: {
            count: 20
        }
        },
        vAxis: {
          title: 'Weight',
          gridlines: {
            count: 20
        }
        },
      chartArea: {top:40, width: "70%", height: "75%"},

      legend: { position: 'none' },
      pointSize: 5
    };

   myLineChart = new google.visualization.LineChart(document.getElementById('myChart2'));

    myLineChart.draw(chartData, options2);
}

我的图表如下：

这在运行时加载。现在我有两个带有值的输入框，当用户点击一个按钮时，我想用不同颜色将该点推到图表上，所以它看起来像这样：

我已经尝试了这个但它打破了图表：

var chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');
  chartData.addColumn('number', 'userenteredpoint1');
  chartData.addColumn('number', 'userenteredpoint1');

  for (var i = 0; i < chartdatax.length; i++) {
      chartData.addRow([parseFloat(chartdatax[i]), parseFloat(chartdatay[i]), parseFloat(chartdatap[i]), parseFloat(chartdataz[i])]);
      };

非常感谢任何帮助。编辑：小提琴：https://jsfiddle.net/rdawkins/bb5enLm9/14/

Answer 1

这是处理它的一种方法。添加的每个附加点将在同一系列中继续。

添加多个系列时，第一列始终用作X值。

＆＃13;

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawchart});

var chartData;
var myLineChart;
var options;

function drawchart() {
  document.getElementById('addPoint').addEventListener('click', addUserPoint, false);

  chartData = new google.visualization.DataTable();
  chartData.addColumn('number', 'Arm');
  chartData.addColumn('number', 'Weight');

  for (var i = 0; i < 10; i++) {
    chartData.addRow([
      parseFloat(i),
      parseFloat(i * 1.5)
    ]);
  };

  options = {
    height: 500,
    hAxis: {
      title: 'Arm C.G',
      gridlines: {
        count: 20
      }
    },
    vAxis: {
      title: 'Weight',
      gridlines: {
        count: 20
      }
    },
    chartArea: {top:40, width: "70%", height: "75%"},
    legend: {position: 'none'},
    pointSize: 5
  };

  myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));
  myLineChart.draw(chartData, options);
}

function addUserPoint() {
  if (chartData.getNumberOfColumns() === 2) {
    chartData.addColumn('number', 'User Input Y');
  }
  chartData.addRow([
    parseFloat(document.getElementById('userX').value),
    null,
    parseFloat(document.getElementById('userY').value)
  ]);
  myLineChart.draw(chartData, options);
}

＆＃13;

<script src="https://www.google.com/jsapi"></script>
<div id="chart1"></div>
<input type="text" id="userX" />
<input type="text" id="userY" />
<input type="button" id="addPoint" value="Add Point" />

＆＃13;

Google Line Chart Two系列

1 个答案: