Javascript图表作为输入 [英] Javascript charts as input

问题描述

我有如下要求.

• 我需要使用图表输入时间序列数据(日数据).数据通常如下所示，但可以根据情况更改配置文件.

现在，数据正在文本框中手动输入，这非常困难.

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.

推荐答案

请参阅以下工作片段，在图表上单击以添加数据点...

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>

这篇关于Javascript图表作为输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！