Javascript圖表作爲輸入

Question

我有一個要求如下。

• 我需要使用圖形輸入時間序列數據（日期數據）。數據通常如下，但配置文件可以根據具體情況進行更改。

現在數據被手動輸入到文本框中，這使得它非常困難。

我想知道是否有解決方案讓用戶在圖表上繪製並在後面生成數據。換句話說，用戶選擇某些點並繪製輪廓。

Answer 1

看到下面的工作片段，點擊圖表上添加一個數據點...

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>