有没有办法去除 ApexCharts 折线图底部的气泡框?
Is there a way to remove the bubble box at the bottom of a line chart in ApexCharts?
还没有找到一种方法来移除或隐藏悬停在折线图底部的气泡框。已经检查了文档,但我仍然没有找到它,或者我只是遗漏了一些东西。很抱歉这个问题,在 Angular 和使用 apexcharts 方面仍然是初学者。
示例如下:https://codesandbox.io/s/apx-line-basic-forked-iltgss?file=/src/app/app.component.html
我要删除的图片:https://imgur.com/a/R0wzVR7
app.component.ts
import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexYAxis,
ApexStroke,
ApexGrid,
ApexFill,
ApexTooltip
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
yaxis: ApexYAxis;
grid: ApexGrid;
stroke: ApexStroke;
fill: ApexFill;
tooltip: ApexTooltip;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial<ChartOptions>;
constructor() {
this.chartOptions = {
series: [
{
name: "",
data: [2, 10, 18, 22, 36, 15, 47, 75, 65, 19, 14, 2, 47, 42, 15]
}
],
chart: {
height: 350,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
stroke: {
curve: "smooth"
},
grid: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
}
},
yaxis: {
show: false
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#5156be"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [100]
}
},
tooltip: {
enabled: true,
followCursor: false,
marker: {
show: false
},
x: {
show: false
},
y: {
formatter: undefined,
title: {
formatter: (seriesName) => seriesName
}
}
}
};
}
}
HTML
<div id="chart">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[grid]="chartOptions.grid"
[stroke]="chartOptions.stroke"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
></apx-chart>
</div>
在 x 轴中禁用工具提示 https://apexcharts.com/docs/options/xaxis/#tooltip
tooltip: {
enabled: false,
},
还没有找到一种方法来移除或隐藏悬停在折线图底部的气泡框。已经检查了文档,但我仍然没有找到它,或者我只是遗漏了一些东西。很抱歉这个问题,在 Angular 和使用 apexcharts 方面仍然是初学者。
示例如下:https://codesandbox.io/s/apx-line-basic-forked-iltgss?file=/src/app/app.component.html
我要删除的图片:https://imgur.com/a/R0wzVR7
app.component.ts
import { Component, ViewChild } from "@angular/core";
import {
ChartComponent,
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexYAxis,
ApexStroke,
ApexGrid,
ApexFill,
ApexTooltip
} from "ng-apexcharts";
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
yaxis: ApexYAxis;
grid: ApexGrid;
stroke: ApexStroke;
fill: ApexFill;
tooltip: ApexTooltip;
};
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("chart") chart: ChartComponent;
public chartOptions: Partial<ChartOptions>;
constructor() {
this.chartOptions = {
series: [
{
name: "",
data: [2, 10, 18, 22, 36, 15, 47, 75, 65, 19, 14, 2, 47, 42, 15]
}
],
chart: {
height: 350,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
stroke: {
curve: "smooth"
},
grid: {
show: false
},
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
}
},
yaxis: {
show: false
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#5156be"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [100]
}
},
tooltip: {
enabled: true,
followCursor: false,
marker: {
show: false
},
x: {
show: false
},
y: {
formatter: undefined,
title: {
formatter: (seriesName) => seriesName
}
}
}
};
}
}
HTML
<div id="chart">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[yaxis]="chartOptions.yaxis"
[grid]="chartOptions.grid"
[stroke]="chartOptions.stroke"
[fill]="chartOptions.fill"
[tooltip]="chartOptions.tooltip"
></apx-chart>
</div>
在 x 轴中禁用工具提示 https://apexcharts.com/docs/options/xaxis/#tooltip
tooltip: {
enabled: false,
},