Question

我正在使用chart.js绘制多个折线图。当用户单击这些图表之一时，我需要知道它是哪个图表。为了吸引用户的点击，我在图表的events: ['click']中添加了options，还添加了一个onClick: clicked来调用功能clicked。用户单击了图表。现在我有了这个：

let chLine = document.getElementById("chLine");

let chartData = {
    labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
    datasets: [
        {
            label: 'c1',
            data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
            backgroundColor: 'transparent',
            borderColor: '#e6194b',
            borderWidth: 1,
            pointBackgroundColor: '#e6194b'
        },
        {
            label: 'c2',
            data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
            backgroundColor: 'transparent',
            borderColor: '#3cb44b',
            borderWidth: 1,
            pointBackgroundColor: '#3cb44b' 
        }
    ]
}

if (chLine) {
    new Chart(chLine,{
            type: 'line',
            data: chartData,
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                        beginAtZero: false
                        }
                    }]
                },
                legend: {
                    position: 'top',
                    labels: {
                        boxWidth: 5
                    }
                },
                events: ['click'],
                onClick: clicked
            }
        }
    );
}

function clicked(c, i) {
    console.log(c, i)
}

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container">
            <div class="row my-3">
                <div class="col">
                    <h4>Chart</h4>
                </div>
            </div>
            <div class="row my-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="chLine" height="100"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <script src="test.js"></script>
    </body>
</html>

每次单击图表时，它都会给出一个array，其中包含有关每个图表的信息，还提供一个对象，其中包含有关click事件的信息。但是我似乎无法找到信息来得出单击哪个图表的结论。我该怎么办？

Answer 1

在clicked函数内，您可以使用getElementAtEvent(c)和_datasetIndex;获取图表数据的索引。之后，使用该索引获取用于绘制该线的数据。图表。在此示例中，另一个字段被添加到数据中，并且在单击时，该名称字段被控制台。在这种情况下，您需要点击图表圈

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
  <div class="row my-3">
    <div class="col">
      <h4>Chart</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <canvas id="chLine" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

let chLine = document.getElementById("chLine");

let chartData = {
  labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
  datasets: [{
      name: 'First Chart',
      label: 'c1',
      data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
      backgroundColor: 'transparent',
      borderColor: '#e6194b',
      borderWidth: 1,
      pointBackgroundColor: '#e6194b'
    },
    {
      name: 'Second Chart',
      label: 'c2',
      data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
      backgroundColor: 'transparent',
      borderColor: '#3cb44b',
      borderWidth: 1,
      pointBackgroundColor: '#3cb44b',
      id: '1',
    }
  ]
}

if (chLine) {
  var myLineChart = new Chart(chLine, {
    type: 'line',
    data: chartData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
      legend: {
        position: 'top',
        labels: {
          boxWidth: 5
        }
      },
      events: ['click'],
      onClick: clicked
    }
  });
}

function clicked(c, i, x) {
  let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
  console.log(chartData.datasets[getDataSetIndex].name)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
  <div class="row my-3">
    <div class="col">
      <h4>Chart</h4>
    </div>
  </div>
  <div class="row my-2">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <canvas id="chLine" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

确定用户单击了哪个图表

1 个答案: