ChartJs单击带有发送参数的栏

时间:2019-02-19 13:23:09

标签: javascript typescript chart.js

我要在单击栏时调用Ajax函数。

例如,使用我的代码,我想在单击巴黎酒吧时发送Paremeter Paris

第二个问题是,当我单击顶部消失的图例栏时。

PS:我使用chartJS 2.7

const dataLabel = ["Paris", "Milan", "London", "Florence", "New York", "Not specified"];

return (new Chart(ctx, {
    type: 'bar',
    data: {
        labels: dataLabel,
        datasets: [{
            data: dataArray,
            backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        events: [],
        responsive: true,
        maintainAspectRatio: false,
        layout: {
        padding: {
            left: 0,
            right: 0,
            top: 20,
            bottom: 0
        }
    },
    legend: {
        display: false
    },
    scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            display: false
          }
        }]
    },
    animation: {
        duration: 1,
        onComplete: function() {
            var chartInstance = this.chart,
            ctx = chartInstance.ctx;

            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                if (dataset.data[index] > 0) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y);
                }
                });
            });
        }
      }
    }
}));

0 个答案:

没有答案