Попытка получить _индекс индексированной панели в ChartJS - PullRequest
Новая
       20

Попытка получить _индекс индексированной панели в ChartJS

0 голосов
/ 22 февраля 2020

У меня есть гистограмма в vue диаграммах, где при нажатии я хочу отобразить фоновые данные в таблице. Это рендер 

startPie: function(canvas, type){
                let chart = new Chart(canvas, {
                    type: type,
                    data: {
                        labels: this.labels,
                        datasets: this.chart_data
                    },
                    options: {
                        responsive: true,
                        animation:{ animateScale:true },
                        title: { display: false },
                        legend: { display: false },
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    color: "#989898"
                                },
                                ticks: {
                                    fontColor: "#989898",
                                    fontSize: 16,
                                    beginAtZero: true,
                                    callback: function(value) {
                                        let ranges = [
                                            { divider: 1e6, suffix: 'M' },
                                            { divider: 1e3, suffix: 'k' }
                                        ];
                                        function formatNumber(n) {
                                            for (let i = 0; i < ranges.length; i++) {
                                                if (n >= ranges[i].divider) {
                                                    return (n / ranges[i].divider).toString() + ranges[i].suffix;
                                                }
                                            }
                                            return n;
                                        }
                                        return '$' + formatNumber(value);
                                    }
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    fontColor: "#989898",
                                    fontSize: 12
                                }
                            }]
                        },
                        plugins: {
                            datalabels: {
                                anchor: 'center',
                                font: {
                                    size: 16,
                                    weight: 'bold'
                                },
                                formatter: function(value, context) {
                                    return '$' + Number(value).toLocaleString();
                                },
                                color: 'white'
                            }
                        },
                        'onClick':(evt, item) => {
                            console.log('CLICK', item[0]);
                        }
                    }
                })
            }

В событии onClick в консоли я вижу индекс

CLICK ChartElement {_chart: Chart, _datasetIndex: 0, _index: 4, скрытый : false, _xScale: ChartElement,…}

Я не могу получить к нему доступ, хотя и без ошибки. Я пытался item[0]._index, item[0]['_index'], item[0]['ChartElement']._index, item[0]['ChartElement']['_index']

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 22 февраля 2020

К сожалению, обработчик событий onClick плохо документирован. Вы можете попытаться определить data в отдельной переменной вне конфигурации диаграммы. 

const data = [55, 68, 82, 48, 75, 45, 67];

Затем вы можете определить обработчик события onClick следующим образом: 

options: {
   ...
   onClick: (event, item) => {
      const idx = chart.getElementAtEvent(event)[0]._index;
      console.log(data[idx]);
   }
}


const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
const data = [55, 68, 82, 48, 75, 45, 67];

let chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,    
    datasets: [{
      label: "My First Dataset",
      data: data,
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          color: "#989898"
        },
        ticks: {
          fontColor: "#989898",
          fontSize: 16,
          beginAtZero: true
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        font: {
          size: 16,
          weight: 'bold'
        },
        formatter: function(value, context) {
          return '$' + Number(value).toLocaleString();
        },
        color: 'white'
      }
    },
    onClick: (evt, item) => {
      const idx = chart.getElementAtEvent(event)[0]._index;
      console.log(data[idx]);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChart" height="80"></canvas>
...