Javascript charts as input

问题

I have a requirement as below.

• I need to input time series data (day data) using a graph. The data is usually like below but the profile can be changed depending upon the situation.

Right now the data is being manually entered in textboxes which makes it very difficult.

I am wondering whether there are solutions that let user draw on a chart and generate the data in the back. In other words, the user picks certain points and the profile is drawn.

回答1:

see following working snippet, click on the chart to add a data point...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "x", "type": "number"},
        {"label": "y", "type": "number"}
      ]
    });

    var axisMax = 10;
    var ticks = [];
    for (var i = 0; i <= axisMax; i = i + 0.5) {
      ticks.push(i);
    }

    var options = {
      chartArea: {
        bottom: 64,
        height: '100%',
        left: 64,
        top: 24,
        width: '100%'
      },
      hAxis: {
        format: '0.0',
        textStyle: {
          fontSize: 9
        },
        ticks: ticks,
        title: data.getColumnLabel(0),
        viewWindow: {
          min: 0,
          max: axisMax
        }
      },
      height: 600,
      legend: {
        position: 'top'
      },
      pointSize: 4,
      vAxis: {
        format: '0.0',
        textStyle: {
          fontSize: 9
        },
        ticks: ticks,
        title: data.getColumnLabel(1),
        viewWindow: {
          min: 0,
          max: axisMax
        }
      }
    };

    var tableDiv = document.getElementById('table_div');
    var table = new google.visualization.Table(tableDiv);
    var chartDiv = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(chartDiv);
    var chartLayout = null;

    google.visualization.events.addListener(chart, 'ready', function () {
      chartLayout = chart.getChartLayoutInterface();
    });
    google.visualization.events.addListener(chart, 'click', function (sender) {
      data.addRow([
        chartLayout.getHAxisValue(sender.x),
        chartLayout.getVAxisValue(sender.y)
      ]);
      drawChart();
    });

    function drawChart() {
      chart.draw(data, options);
      table.draw(data);
    }

    window.addEventListener('resize', drawChart, false);
    drawChart();
  },
  packages:['corechart', 'table']
});

div {
  text-align: center;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

来源：https://stackoverflow.com/questions/42572477/javascript-charts-as-input