如何在chart.js条形图工具提示中添加额外数据

时间:2018-07-29 14:30:17

标签: charts chart.js

我有一个使用chart.js构建的条形图,点击特定的条形图可获取一个额外的数据国家(这将返回两个值)

我想在我尝试过的工具提示中显示数据值:工具提示和标签的回调,但无法执行此操作,请有人可以知道如何实现

buildTheBarChart() {
    this.barChartService.getDataForSitesConnected();
    this.barChartService.getDataForSitesConnected().then((countryValue: any[]) => {
      this.countryValue = countryValue;
      console.log('the response is ' , countryValue[0].countryName);
      this.countryNames = [];
      this.countOfSites = [];
      this.countryIdArray = [];

      for (let i = 0 ; i < countryValue.length; i++) {
        this.countryNames.push(countryValue[i].countryName);
        this.countOfSites.push(countryValue[i].countSites);
        this.countryIdArray.push(countryValue[i].countryId);
      }

    this.sitesCount = this.countOfSites;
    // tslint:disable-next-line:radix
    this.BarChart =  new Chart('barChart', {
      type: 'bar',
      data: {
        labels : this.countryNames,
        datasets: [{
          label: 'Sites Connected ',
          Label: this.countryIdArray,
          data: this.sitesCount,
          backgroundColor : [
            'rgba(234,104,32,1)',
            'rgba(20,133,221,1)',
            'rgba(156,204,51,1)',
            'rgba(234,104,32,1)',
          ],
          borderColor: [ ],
          borderWidth: 1
        }]
      },
      options: {
        events: ['click'],
        onClick: (c, i) => {
          // tslint:disable-next-line:prefer-const
          let countryLabel;
          countryLabel = i[0]._model.label;
          this.updateByName = {
            'countryName': countryLabel
          };
          console.log(countryLabel);
          this.updatedbarData();
            this.barChartService.getDataForConnectedsitesByCountry(this.updateByName).then((sitesValues: any[]) => {
              this.sitesValues = sitesValues;
              this.onlineSites = this.sitesValues.online;
              this.oflineSites = this.sitesValues.offline;
              console.log('the OflineSites are ' , this.onlineSites, this.oflineSites );
            });
        },

        legend: {
          display: false,
          labels: {
            fontColor: 'Black',
            fontSize: 16
          },
        },
        title: {
          text : 'Total Sites',
          display: true,
          fontSize: 23,
          fontColor: '#000'
        },
        scales: {
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Count',
              fontColor: 'black',
              fontSize: 20
            },
            ticks: {
              beginAtZero :  true,
              userCallback: function(label, index, labels) {
                if (Math.floor(label) === label) {
                  return label;
                }
              },
            }
          }],
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Country',
              fontColor:  'black',
              fontSize: 20

            }
          }]
        }
      }
    });
    });

  }

这是我的代码,在onClick中,我正在获取存储在this.oflinesites和this.onlinesites

中的数据

所以请您帮我把这两个值放在工具提示中

0 个答案:

没有答案