ChartJS具有多轴自定义工具提示无法正常工作

时间:2018-02-28 15:40:16

标签: chart.js

我在Angular 5应用程序上使用了最新版本的chartJS,但是当我尝试使用选项和自定义函数调用自定义工具提示时,没有任何反应。

我添加了一个console.log来查看该函数是否被调用但我没有看到它。

这是我的选项对象。

this.chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: '',
        fontStyle: 'bold'
      },
      animation: {
        duration: 0
      },
      hover: {
        animationDuration: 0,
        mode: 'nearest',
        intersect: true
      },
      responsiveAnimationDuration: 0,
      elements: {
        line: {
          tension: 0
        }, 
        point: {
          radius: 5
        }
      },
      scales: {
        xAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'Year',
              fontStyle: 'bold'
            }
          }
        ],
        yAxes: [
          {
            id: 'y-axis-1',
            display: true,
            position: 'left',
            type: 'linear',
            scaleLabel: {
              display: true,
              labelString: (this.chartUnit === 'U') ? 'Sales (Units)' : 'Sales (USD)',
              fontStyle: 'bold'
            },
            stacked: false,
            ticks: {
              callback: function(value, index, values) {
                const prefix = self.chartUnit === 'D' ? '$' : self.chartUnit === 'P' ? '%' : '';
                const numValue = value.toLocaleString();

                if (self.chartUnit === 'P') {
                  return numValue + prefix;
                } else {
                  return prefix + numValue;
                }
              },
              fontStyle: 'bold'
            }
          },
          {
            id: 'y-axis-2',
            display: true,
            position: 'right',
            type: 'linear',
            gridLines: {
              display: true,
              drawBorder: true,
              drawOnChartArea: false
            },
            scaleLabel: {
              display: true,
              labelString: (this.chartUnit === 'U') ? 'Total Sales (Units)' : 'Total Sales (USD)',
              fontStyle: 'bold'
            },
            stacked: false,
            ticks: {
              callback: function(value, index, values) {
                const prefix = self.chartUnit === 'D' ? '$' : self.chartUnit === 'P' ? '%' : '';
                const numValue = value.toLocaleString();
                if (self.chartUnit === 'P') {
                  return numValue + prefix;
                } else {
                  return prefix + numValue;
                }
              },
              fontStyle: 'bold'
            }
          }
        ]
      },
      tooltip: {
        mode: 'nearest',
        custom: function() {
          console.log('hello');
        }
      }
    }

0 个答案:

没有答案