Javascript 单击interactive chart.js条形图并获取js中标签和组的值

我正在构建一个网络应用程序，你可以在其中选择航空公司，并获得一个包含五个类别（公司、食品、行李、守时、员工）分数的条形图。当用户单击图表的不同部分时，我想获取公司名称和类别的值。这是为了在Python中使用companyname和category的值做进一步的事情

例如，在下图中，当用户单击绿色大条（右起第四条）时，我希望我的JS收到

company=“Air France”，category=“守时”

。我想我需要用

onclick

做点什么，但是我想不出

上下文：根据您在表单框中选择的公司，Python后端将json数据返回给JS。在JS

addGroupBarChart

中，使用chart.JS绘制图表，并将其嵌入html中的canvas元素中

这是JavaScript的摘录

document.getElementById('button').onclick = function(){
/* returns the companies value chosen from the dropdown */
/* and draw a chart using addGroupBarChart function */
    let companies = $("#companies").val();
    let headers = new Headers()
    let init = {
        method : 'GET',
        headers : headers
    }
    let params = {
        'companies':companies
    }

    let url = getWebAppBackendUrl('/get_stats')+'/'+JSON.stringify(params)
    let promise = fetch(url, init) 
                   .then(function(response){
                       response.json()
                               .then(function(data){
                                addGroupBarChart(data.barChartGroup.company, 
                                                 data.barChartGroup.labels);
                                })
                   });
}


document.getElementById("bar-chart-group").onclick = function(......) {
/* returns the company and category chosen from the chart */
/* this is the function I don't know how to build */
    let activePoints = // here I assume I need getPointsAtEvent(evt) but not sure...
    let company = // company value based on the click on the chart
    let category = // category value based on the click on the chart
    let headers = new Headers()
    let init = {
        method : 'GET',
        headers : headers
    }
    let params = {
        'company':company,
        'category':category
    }

    let url = getWebAppBackendUrl('/get_table')+'/'+JSON.stringify(params)
    let promise = fetch(url, init) 
                   .then(function(response) {
                       response.json()
                       .then(function(data){
                           // function to add table
                       })
                   });
}


function addGroupBarChart(data, labels) {
/* function to add a bar chart using the data returned from Python backend */
    document.getElementById('bar-card').innerHTML = '<canvas id="bar-chart-group" chart-click="onClick"></canvas>';
    i = 1
    arr = []
    data.forEach(function(d){
        company = Object.keys(d);
        values = d[company]['data'];
        dataset_company = {
            label:company,
            backgroundColor: default_colors[i],
            data:values};
        console.log("dataset_company", dataset_company);
        arr.push(dataset_company);
        i+=1;
    })

    let data_grouped = {
        labels: labels,
        datasets: arr
              };

    new Chart(document.getElementById("bar-chart-group"), {
        type: "bar",
        data: data_grouped,
        options: {
          title: {
            display: false,
            text: "Sentiment by category"
          }
        }
    });
}

我尝试了几种解决方案，包括一种，但它使我的应用程序即使在单击“显示图表”按钮后也无法显示图表。我上星期开始学习JS，所以很无聊。。。任何帮助都将不胜感激。谢谢大家!

您可以定义一个事件处理程序，但遗憾的是，它的文档很少。在您的情况下，它将如下所示，

onbar单击的

是您自己的函数，可通过

company

和

category

调用

options: {
  ...
  onClick: event => {
    const datasetIndex = chart.getElementAtEvent(event)[0]._datasetIndex;
    const model = chart.getElementsAtEvent(event)[datasetIndex]._model;
    onBarClicked(model.datasetLabel, model.label);
  }
}

请查看以下修改后的代码：

单击工具栏上的功能（公司、类别）{ console.log（'company='+company+“，category=“+category”）； } 常量默认颜色=['绿色'，'蓝色']； 函数addGroupBarChart（数据、标签）{ arr=[] data.forEach（（d，i）=>{ 公司=对象。键（d）[0]； 值=d[公司][“数据]]； 数据集_公司={ 标签：公司， 背景颜色：默认颜色[i]， 数据：值 }; arr.push（数据集公司）； }); 让数据_分组={ 标签：标签， 数据集：arr }; var图表=新图表（“条形图组”{ 输入：“酒吧”， 数据：数据分组， 选项：{ 标题：{ 显示：假， 正文：“按类别划分的情绪” }, onClick:event=>{ const datasetIndex=chart.getElementAtEvent（事件）[0]。\u datasetIndex； const model=chart.getElementsAtEvent（事件）[datasetIndex]。\u model； onBarClicked（model.datasetLabel、model.label）； } } }); } const data=[{“法航”：{“数据”：[0.1，-0.2,0.3，-0.1,0.1]}， {“汉莎航空”：{“数据”：[0.3，-0.2,0.5,0.2,0.1]}]； const标签=[“公司”、“食品”、“行李”、“准时”、“员工”]； addGroupBarChart（数据、标签）

options: {
  ...
  onClick: event => {
    const datasetIndex = chart.getElementAtEvent(event)[0]._datasetIndex;
    const model = chart.getElementsAtEvent(event)[datasetIndex]._model;
    onBarClicked(model.datasetLabel, model.label);
  }
}