Question

我正在使用Angular Google Charts。我正在处理一个要求，当用户单击它们时，我需要更改x轴值的格式。像绝对值<=>百分比值。当用户单击x轴上的任意位置而不是图表的其他部分时，有什么方法可以捕获事件？

我尝试了angular的（单击）事件，但是单击图表的哪个部分并没有给我任何信息。

Answer 1

取决于所使用的图表，
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) 127.0.0.1 - - [02/Jul/2019 17:58:42] "GET / HTTP/1.1" 404 - [2019-07-02 17:58:47,184] ERROR in app: Exception on /dtd [GET] Traceback (most recent call last): File "C:\Users\biltu\Anaconda3\lib\site-packages\flask\app.py", line 1982, in wsgi_app response = self.full_dispatch_request() File "C:\Users\biltu\Anaconda3\lib\site-packages\flask\app.py", line 1615, in full_dispatch_request return self.finalize_request(rv) File "C:\Users\biltu\Anaconda3\lib\site-packages\flask\app.py", line 1630, in finalize_request response = self.make_response(rv) File "C:\Users\biltu\Anaconda3\lib\site-packages\flask\app.py", line 1740, in make_response rv = self.response_class.force_type(rv, request.environ) File "C:\Users\biltu\Anaconda3\lib\site-packages\werkzeug\wrappers.py", line 921, in force_type response = BaseResponse(*_run_wsgi_app(response, environ)) File "C:\Users\biltu\Anaconda3\lib\site-packages\werkzeug\test.py", line 923, in run_wsgi_app app_rv = app(environ, start_response) TypeError: 'dict' object is not callable程序包中的大多数图表都有一个'corechart'事件。
查看文档中的events部分以获取特定图表。

'click'事件将收到一个参数，其中单击了图表元素的'click'。
单击x轴标签时，targetID将具有以下形式。

targetID

其中第一个hAxis#0#label#0是轴的索引（如果只有一个x轴，则始终为零）
第二个0是单击的标签的索引。

，因此以下内容表示单击了第一个x轴上的第二个x轴标签。

这样，我们可以使用正则表达式来确定是否单击了任何x轴标签。

hAxis#0#label#1

请参阅以下工作片段，
单击图表以查看结果。

/hAxis#(\d+)#label#(\d+)/

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y0');

  for (var i = 0; i <= 100; i++) {
    var direction = (i % 2 === 0) ? 1 : -1;
    data.addRow([i, (2 * i * direction)]);
  }

  var options = {
    curveType: 'function'
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'click', function(e) {
    var match = e.targetID.match(/hAxis#(\d+)#label#(\d+)/);
    if ((match !== null) && (match.length > 0)) {
      console.log('x-axis label -->', e.targetID);
    } else {
      console.log('not x-axis label -->', e.targetID);
    }
  });

  chart.draw(data, options);
});

用户单击Google图表上的x轴时捕获事件

1 个答案: