使图表JS标签可以点击并获得标签的详细信息。

Question

我是一个新的Angular和chartJS，并使用Angular 5.我需要使图表标签可以点击，并应该返回其细节，如索引和名称。我需要让图表标签可以点击，并且应该返回它的详细信息，如索引和名称。我已经尝试使用了 getElementAtEvent() 但它只在图表上的任何地方点击后返回空数组。我翻阅了许多StackOverflow的帖子，但我没有在angular中找到任何东西。labels 下图中红圈处。先谢谢你了。

  this.subPerf = new Chart(ctx2, {
      type: 'line',
      data: chartPerfData,
      options: {
        legend: legend,
        responsive: true,
        maintainAspectRatio: false,
        scales: scales,
        onClick: function (e) {
          var element = this.getElementAtEvent(e);
          console.log(element)
        }
      }
    })
  }

            <div class=" chart">
                <div class="chartWrapper">
                    <div class="chartAreaWrapper">
                        <div class="chartAreaWrapper2 ">
                            <canvas #subPerf></canvas>
                        </div>
                    </div>
                    <canvas #subPerfAxis height="300" width="0"></canvas>
                </div>
            </div>

Answer 1

的问题 getElementAtEvent 是它在事件位置返回一个单一的图表元素（一个条形图，一个点等）。tick标签不被认为是一个图表元素，因此你不会得到任何数据。

您可以定义您的 onClick 函数，而不是如下。

onClick: event => {
  let point = Chart.helpers.getRelativePosition(event, subPerf.chart);
  let xIndex = subPerf.scales['x-axis-0'].getValueForPixel(point.x);
  let label = subPerf.data.labels[xIndex];
  console.log(label + ' at index ' + xIndex);
},

请看一下这个 StackBlitz 使用Angular 6的。我希望同样也适用于Angular 5。