如何使用气泡图的 apexcharts 以角度制作自定义工具提示

Question

我正在尝试在 apexcharts 库的气泡图中自定义工具提示。 https://codesandbox.io/s/apx-bubble-simple-q87t0?from-embed

Answer 1

根据他们的文档，可以向图表添加自定义工具提示

基于文档：https://apexcharts.com/docs/options/tooltip/#custom

试试这个

组件.ts

在 chartoptions 模型中创建一个名为 tooltip 的属性

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis;
  title: ApexTitleSubtitle;
  fill: ApexFill;
  dataLabels: ApexDataLabels;
  tooltip:any // to be simple I made it as any, can be replaced with the proper className
};

添加您的自定义工具提示功能

 tooltip: {
      custom: function({series, seriesIndex, dataPointIndex, w}) {
        return '<div class="arrow_box">' +
          '<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
          '</div>'
      }
    }

并在 html 中将此函数也添加到组件的输入中

<!--The content below is only a placeholder and can be replaced.-->
<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [fill]="chartOptions.fill"
    [dataLabels]="chartOptions.dataLabels"
    [title]="chartOptions.title"
    [yaxis]="chartOptions.yaxis"
    [tooltip]="chartOptions.tooltip" // This line will add the tooltip 
  ></apx-chart>
</div>

来源 https://apexcharts.com/docs/angular-charts/ https://apexcharts.com/docs/options/tooltip/