Question

我正在尝试在c3.js中创建一个有onclick method and a custom tooltip的折线图。此自定义工具提示将数据格式化为M，B，K（使用numberFormat()方法）。在此处，onclick正在调用this.openLink()，工具提示正在调用numberFormat()之外的buildsplineChart()。

错误： - "this.numberFormat is not a function"

请帮助找出错误。

其次，如何在global method和.ts的单独openLink()文件中编写numberFormat()，这样，这两种方法可以在c3.js图表中重复使用。如果提供了以下问题的任何示例，它将会有所帮助。

spline.chart.component.html

  <div #chartContainer id="chartsContainer" class="chartsContainer" style='align-self: center;' [ngStyle]="{'width':divWidth + 'px', 'height':divHeight + 'px'}">
  </div>

spline.chart.component.ts

import { Component, OnInit, ViewChild, Input, ElementRef, AfterViewInit } from '@angular/core';
import * as c3 from 'c3';

@Component({
  selector: '----------',
  templateUrl: '----------',
  styleUrls: ['------']
})
    export class PrgLineChartComponent implements OnInit {

 trendChart: c3.ChartAPI;
    yColumnData = ['data1','20000000', '200', '100000', '40000000', '100000', '250000', '30000', '20000', '100000', '400000', '1500000', '5000000'];
    xColumnData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    ngOnInit() {
    this.buildsplineChart(this.yColumnData, this.xColumnData)
    }

     buildsplineChart(yaxisdata, xaxisdata): any {
    this.trendChart = c3.generate({
     bindto: '#chartsContainer',
     padding: {
         top: 10,
         right: 50,
         bottom: 10,
         left: 50,
              },
     size: {
         width: 600,
         height: 400,
              },
     data: {
          columns: [this.yaxisdata],
     type: 'spline',
           onclick: function (d, i) {
                    console.log('onclick', d, i);
                    this.openLink(d.id);   <------------ method calling
                   },
      bar: {
             width: {
              ratio: 0.5 // this makes bar width 50% of length between ticks
                   }
                   },
       legend: {
                show: true
              },
        axis: {
                x: {
                  height: 35,
                  type: 'category',
                  categories:  this.xaxisdata,
                },
                y: {
                  show: false
                }
    tooltip: {
         contents: function (d, defaultTitleFormat, defaultValueFormat, color) {

         let $$ = this, config = $$.config, CLASS = $$.CLASS,
         titleFormat = config.tooltip_format_title || defaultTitleFormat,
          nameFormat = config.tooltip_format_name || function (name) {
                        return name;
                         },

         valueFormat = config.tooltip_format_value || defaultValueFormat,
         text, i, title, value, name, bgcolor;


          for (i = 0; i < d.length; i++) {
           if (!(d[i] && (d[i].value || d[i].value === 0))) {
                      continue;
                    }

        if (!text) {
       text = '<table id="pieTooltip" class="' + CLASS.tooltip + '">' + (title || title === 0 ? '<tr><th colspan="2">' + title + '</th></tr>' : '');
                   }

         name = nameFormat(d[i].name);
         value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
         bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

         text += '<tr class = "" + CLASS.tooltipName + "-" + d[i].id + "">';

         text += '<td class="name" style="white-space: nowrap;"><span 
                   style="background-color:' + bgcolor + '"></span>' + name + 
                   '<br/>' + '(Aug-17)' + '</td>';
        text += '<td class="value" style="white-space: nowrap;">';
        text +=  this.numberFormat(d[i].value, 'us');    <------ method calling
        text += '</td>';
        text += '</tr>';
                  }
         return text + '</table>';
                }
              }
            });
          }

     openLink(filter1) {     <-------- method 
      alert('hi');
      }


     numberFormat  (value, currencytype): any {    <-------- method 
           if (currencytype === 'us') { // us
         return value > 999999999 ? (value / 1000000000).toFixed(2) + ' B'
                : value > 999999 ? (value / 1000000).toFixed(2) + ' M'
                  : value > 999 ? (value / 1000).toFixed(2) + ' K'
                    : value;
            }
           }
          }

Answer 1

因为this不会指向组件实例，而是指向调用者。

尝试

 onclick: (d, i) => {

而不是

 onclick: function (d, i) {

另见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

根据您的操作，如果zone.run包含与更改检测相关的代码，则可能需要添加openLink以使更改检测正常工作。

export class PrgLineChartComponent implements OnInit {
  constructor(private zone:NgZone) {}

  openLink(filter1) {     <-------- method
    this.zone.run(() => { 
      alert('hi');
    });
  }

tooltip和onclick调用方法无法在angular2（c3.js）

spline.chart.component.html

spline.chart.component.ts

1 个答案: