在 ng2-charts 中定义工具提示的新位置

【问题标题】：Define new position for tooltip in ng2-charts在 ng2-charts 中定义工具提示的新位置
【发布时间】：2019-12-01 02:18:19
【问题描述】：

我在 Angular 6 中安装了 ng2-charts，我想知道如何为工具提示定义新位置。我在 Charts.js 中找到了该指南，但我不明白在哪里可以定义它。 https://www.chartjs.org/docs/latest/configuration/tooltip.html

Angular6

barChartPlugins = [pluginDataLabels];
chartOptions: any = {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
     enabled: true,
     position: 'nearest'
    },
    scales: {
      xAxes: [{
        gridLines: {
          lineWidth: 0.2
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        gridLines: {
          lineWidth: 0.5
        }
      }]
    },
    plugins: {
      datalabels: {
        display: false
      },
    }
  };

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

您可以将 tooltip 定义为 chartOptions 的子级和 responsive 或 'scales' 或 plugins 的兄弟 - 您已将它插入到上面代码中的正确位置...查看下面的示例以查看如果缺少其他东西...

相关TS：

  public lineChartOptions: any = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          max: 60,
          min: 0,
        }
      }],
      xAxes: [{
      }],
    },
    plugins: {
      datalabels: {
        display: true,
        align: 'top',
        anchor: 'end',
        color: "#222",
        font: {
          family: 'FontAwesome',
          size: 14
        },
      },
      deferred: false
    },
    tooltips: {
      position: 'nearest',
      backgroundColor: 'yellow',
      bodyFontColor: '#999',
      borderColor: '#999',
      borderWidth: 1,
      caretPadding: 15,
      colorBody: '#666',
      displayColors: false,
      enabled: true,
      intersect: true,
      mode: 'x',
      titleFontColor: '#999',
      titleMarginBottom: 10,
      xPadding: 15,
      yPadding: 15,
    }
  };

完成working stackblitz here

【讨论】：