javascript - Chart.js Multiple dataset - Stack Overflow

admin管理员组

文章数量:1287629

I have a problem with Chart.js.

I want an an alert show me the ID value set in the dataset when I click on a point in the chart.

I have tried using getElementsAtEvent(evt);, but it doesn't work as I expected.

Can somebody help me? Thanks!

var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        label: 'Linea A',
        backgroundColor: "transparent",
        borderColor: color[1],
        pointBackgroundColor: color[1],
        pointBorderColor: color[1],
        pointHoverBackgroundColor: color[1],
        pointHoverBorderColor: color[1],
        data: [{
          x: "2014-09-02",
          y: 90,
          id: '1A'
        }, {
          x: "2014-11-02",
          y: 96,
          id: '2A'
        }, {
          x: "2014-12-03",
          y: 97,
          id: '3A'
        }]
      },
      {
        label: 'Linea B',
        backgroundColor: "transparent",
        borderColor: color[2],
        pointBackgroundColor: color[2],
        pointBorderColor: color[2],
        pointHoverBackgroundColor: color[2],
        pointHoverBorderColor: color[2],
        data: [{
          x: "2014-09-01",
          y: 96,
          id: "1B"
        }, {
          x: "2014-10-04",
          y: 95.8,
          id: "2B"
        }, {
          x: "2014-11-06",
          y: 99,
          id: "3B"
        }]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Polveri',
      fontSize: 18
    },
    legend: {
      display: true,
      position: "bottom"
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            'millisecond': 'MM/YY',
            'second': 'MM/YY',
            'minute': 'MM/YY',
            'hour': 'MM/YY',
            'day': 'MM/YY',
            'week': 'MM/YY',
            'month': 'MM/YY',
            'quarter': 'MM/YY',
            'year': 'MM/YY',
          },
          tooltipFormat: "DD/MM/YY"
        }
      }]
    }
  }
});

document.getElementById("myChart").onclick = function(evt) {
  var activePoints = scatterChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[1];
  console.log(firstPoint._datasetIndex);
  console.log(firstPoint._index);
  var label = scatterChart.data.labels[firstPoint._index];
  console.log(scatterChart.data.datasets[0].data[0].id);
  var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
  if (firstPoint !== undefined)
    alert(label + ": " + value);
};

<script src=".12.4.min.js"></script>
<script src=".js/2.29.0/moment.min.js"></script>
<script src=".js/2.5.0/Chart.js">
</script>
<canvas id="myChart" width="400" height="100"></canvas>

I have a problem with Chart.js.

I want an an alert show me the ID value set in the dataset when I click on a point in the chart.

I have tried using getElementsAtEvent(evt);, but it doesn't work as I expected.

Can somebody help me? Thanks!

var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        label: 'Linea A',
        backgroundColor: "transparent",
        borderColor: color[1],
        pointBackgroundColor: color[1],
        pointBorderColor: color[1],
        pointHoverBackgroundColor: color[1],
        pointHoverBorderColor: color[1],
        data: [{
          x: "2014-09-02",
          y: 90,
          id: '1A'
        }, {
          x: "2014-11-02",
          y: 96,
          id: '2A'
        }, {
          x: "2014-12-03",
          y: 97,
          id: '3A'
        }]
      },
      {
        label: 'Linea B',
        backgroundColor: "transparent",
        borderColor: color[2],
        pointBackgroundColor: color[2],
        pointBorderColor: color[2],
        pointHoverBackgroundColor: color[2],
        pointHoverBorderColor: color[2],
        data: [{
          x: "2014-09-01",
          y: 96,
          id: "1B"
        }, {
          x: "2014-10-04",
          y: 95.8,
          id: "2B"
        }, {
          x: "2014-11-06",
          y: 99,
          id: "3B"
        }]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Polveri',
      fontSize: 18
    },
    legend: {
      display: true,
      position: "bottom"
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            'millisecond': 'MM/YY',
            'second': 'MM/YY',
            'minute': 'MM/YY',
            'hour': 'MM/YY',
            'day': 'MM/YY',
            'week': 'MM/YY',
            'month': 'MM/YY',
            'quarter': 'MM/YY',
            'year': 'MM/YY',
          },
          tooltipFormat: "DD/MM/YY"
        }
      }]
    }
  }
});

document.getElementById("myChart").onclick = function(evt) {
  var activePoints = scatterChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[1];
  console.log(firstPoint._datasetIndex);
  console.log(firstPoint._index);
  var label = scatterChart.data.labels[firstPoint._index];
  console.log(scatterChart.data.datasets[0].data[0].id);
  var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
  if (firstPoint !== undefined)
    alert(label + ": " + value);
};

<script src="https://code.jquery./jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.5.0/Chart.js">
</script>
<canvas id="myChart" width="400" height="100"></canvas>

• javascript
• charts
• chart.js

Share Improve this question Follow edited Sep 29, 2020 at 6:54 user128511 asked Mar 29, 2017 at 6:12 PietroR91PietroR91 6111 gold badge11 silver badge22 bronze badges 2

• Did you forget to add Moment.js in your above code?.. It is not working for me. – David R Commented Mar 29, 2017 at 6:15
• +1 because I didn't actually know how to create a chart with multiple datasets until I read your sample code. – F1Krazy Commented Oct 25, 2019 at 9:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You have to change your label variable assignment from,

var label = scatterChart.data.labels[firstPoint._index];

To,

var label = scatterChart.data.datasets[firstPoint._index].label;

And you may also need to change your alert statment as,

alert(label + ": " + value.x);

Here is the working DEMO: https://jsfiddle/dt6c9jev/

Hope this helps!.

You need to use the .getElementAtEvent() prototype method instead of .getElementsAtEvent(). The difference being the first only returns the single point that you clicked whereas the other returns all points at the X axis for that click.

Here is an example.

document.getElementById("canvas").onclick = function(evt) {
  var activePoint = myLine.getElementAtEvent(event);

  // make sure click was on an actual point
  if (activePoint.length > 0) {
    var clickedDatasetIndex = activePoint[0]._datasetIndex;
    var clickedElementindex = activePoint[0]._index;
    var label = myLine.data.labels[clickedElementindex];
    var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];     
    alert("Clicked: " + label + " - " + value);
  }
};

You can see a demonstration at this codepen.

本文标签： javascriptChartjs Multiple datasetStack Overflow