要显示Angular 8和Highcharts中的工具提示十字准心,您可以按照以下步骤执行:
npm install @angular/cli
npm install highcharts --save
npm install highcharts-angular --save
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
chartOptions: Highcharts.Options;
constructor() { }
ngOnInit() {
this.chartOptions = {
chart: {
type: 'line',
zoomType: 'xy',
events: {
load: this.enableCrosshair.bind(this)
}
},
title: {
text: '示例图表'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
title: {
text: '数据'
}
},
series: [{
name: '数据系列',
data: [1, 2, 3, 4, 5]
}]
};
}
enableCrosshair() {
const chart = this.chartOptions.chart;
const tooltip = chart.tooltip;
// 启用十字准心
chart.update({
plotOptions: {
series: {
cursor: 'crosshair',
point: {
events: {
mouseOver: function() {
this.setState('hover');
},
mouseOut: function() {
this.setState('');
}
}
},
events: {
mouseOver: function() {
chart.tooltip.refresh(this);
},
mouseOut: function() {
chart.tooltip.hide();
}
}
}
}
});
// 自定义工具提示格式
tooltip.formatter = function() {
const points = this.points;
let tooltipText = '' + this.x + '
';
points.forEach(function(point) {
tooltipText += '\u25CF ' + point.series.name + ': ' + point.y + '
';
});
return tooltipText;
};
}
}
highcharts-chart
指令绑定图表选项。这是一个示例模板代码:
import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
imports: [
// ...
HighchartsChartModule
],
// ...
})
export class AppModule { }
现在您应该能够在Angular 8应用程序中显示具有工具提示十字准心的Highcharts图表了。当鼠标悬停在图表上时,将显示工具提示,并且将显示一个十字准心以指示所选数据点。
上一篇:Angular 8和Flask REST API作为Docker swarm服务的CORS请求未成功。
下一篇:Angular 8和jest - 找不到文件:jest-preset-angular/InlineHtmlStripStylesTransformer.js。