Question

我在一个页面上有多个图表。它们是动态创建的。我需要在点击事件中或以某种方式确定点击了哪个图表。

也许是父元素？画布 'canvas1' 或 'canvas2' 或 ..'canvas10'，位于 id 'col1' 或 'col2' 或 ..'col10' 的引导列中我无法通过点击功能传递参数

onClick: OnDrillDownClick(evt, canvasIdParam)

当然，每个图表都有不同的画布，但都定义为 demoChart。

var canvasChart = $("#canvas" + canvasId).get(0).getContext("2d");
demoChart = new Chart(canvasChart,

使用提供的“OnClick”功能，例如

function OnDrillDownClick(evt)
{
    var activePoints = demoChart.getElementsAtEvent(evt);
    ...etc
}

我只需要确定点击了哪个图表，因为我保留了一组创建的图表，即

var chartRec = {
        CanvasId: canvasId,
        Chart: demoChart
    };

    chartsArray.push(chartRec);

非常感谢

Answer 1

您可以像这样从点击事件中获取画布 ID：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    onClick: (evt) => {
      console.log(evt.target.getAttribute('id'))
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

确定点击了哪个 chartJs 图表

1 个答案: