Angular5 - 响应Highcharts与配置不工作
问题描述 投票：1回答：2
我想有使用这样从Highcharts响应配置Angular5响应https://www.highcharts.com/docs/chart-concepts/responsive：
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
我使用angular-highcharts库与typescript一起做这个。下面是我用完全一样的Highcharts网站提到的响应配置代码：
import {Component, OnInit} from '@angular/core';
import {Chart} from 'angular-highcharts';
import * as Highcharts from 'highcharts';
@Component({
selector: 'historical-health-data',
templateUrl: './historical-health-data.component.html',
styleUrls: ['./historical-health-data.component.less']
})
export class HistoricalHealthDataComponent {
chart: Chart;
ngOnInit() {
this.chart = new Chart({
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
title: {
text: null
}
},
series: [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
});
});
}
}
历史 - 健康data.component.html：
<div [chart]="chart"></div>
通过添加完全一样Highcharts文档中提到的响应配置：https://www.highcharts.com/demo/responsive我收到以下错误：
error TS2345: Argument of type '{ chart: { type: string; height: number; style: { fo
ntFamily: string; }; events: { click: () => v...' is not assignable to parameter of type 'Options'.
Types of property 'responsive' are incompatible.
Type '{ rules: { condition: { maxWidth: number; }; chartOptions: { legend: { enabled: boolean; }; }; }[...' is not assignable to type 'ResponsiveOptions[]'.
Object literal may only specify known properties, and 'rules' does not exist in type 'ResponsiveOptions[]'.
我到底做错了什么？有没有更好的方式来实现响应图表？
我知道，图表必须是默认响应但对我来说这是X轴是如何在浏览器最小化到< 700px行为：
x轴是扩大和页面上的下面板的下面去。
这是怎么回事必须是或类似：
2个回答
1
投票
投票
我面临着同样的问题，这是我的解决方案，并希望这将有助于给任何人。它可能对大型数据集的性能问题。
ngOnInit() {
this.innerWidth = window.innerWidth;
this.chartOptions = {
chart: {
type: 'line',
height: 120,
width: this.innerWidth - 50
},.....
};
this.chart = new Chart(this.chartOptions);
}
直接屏幕的变化和重新规划了它。
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
this.chartOptions.chart.width = this.innerWidth - 50;
this.chart = new Chart(this.chartOptions);
}
0
投票
投票
使用BreakpointObserver固定我的问题，其他变化不大我所做的是使用chartConfig先建的配置使用highcharts Options，然后将数据绑定到Chart对象。这样我可以随时重新加载配置每当我需要重新绘制图表。下面是完整的代码：
import {Component, OnInit} from '@angular/core';
import {Chart} from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import {Options} from 'highcharts/highstock';
import {BreakpointObserver} from '@angular/cdk/layout';
@Component({
selector: 'historical-health-data',
templateUrl: './historical-health-data.component.html',
styleUrls: ['./historical-health-data.component.less']
})
export class HistoricalHealthDataComponent {
chart: Chart;
chartConfig: Options;
constructor(private bm: BreakpointObserver) {
super();
}
media() {
// responsive chart
this.mediaSubscription = this.bm.observe('(max-width: 1200px)').subscribe(result => {
//change these values to your desired values as per requirement
const height = result.matches ? 190 : 300;
if (!this.height) {
// initial display
this.height = height;
this.load();
} else if (this.height !== height && this.chart && this.chart.ref) {
// redraw
this.height = height;
this.chartConfig.chart.height = this.height;
this.chart = new Chart(this.chartConfig);
} else {
// do nothing
}
});
}
ngOnInit() {
this.media();
this.chartConfig = {
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
title: {
text: null
}
},
series: [],
};
//assign/bind the data here after the config is initialized
this.chartConfig.series = [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}];
//finally create the Chart object here with the config
this.chart = new Chart(this.chartConfig);
});
}
}
最新问题
- 使用PySNMP监控网络设备
- 如何使用 docker-compose 在 docker/container 之外公开 ZMQ 容器端口？
- 如何检查用户是否已存在于 Supabase 中？
- 如何使用 mibdump.py 为企业 MIB 生成 .py 文件
- 如何将图像转换并模糊为以下输出？
- 如何修改Cognito Userpool的自定义属性？
- AWS Lambda 与 API Gateway 502 集成错误
- 从外部源（文件或文件夹内容）创建 Inno Setup 组件/类型的动态列表
- 反应本机中的样式抽屉菜单切换按钮
- 智能电视应用SDK并支持自动启动和自动更新
- 字符串列表的 ASP.NET Core JsonResult 生成带单引号而不是双引号的 JSON
- Shopware6 SW6 中 DAL 索引的作用是什么？
- 如何获取 Elementor 自定义小部件的简码
- 我们可以通过文件或者局部变量来创建数据源吗？
- 如何使用 docker-compose 在 docker/container 之外公开容器 ZMQ 端口？
- cordova 存储本地数据的最佳方式是什么？
- ipython 笔记本中不显示打印
- 如果将数据移动到不同的块，C++ realloc 函数是否会对旧数据块进行删除操作？
- 为什么被屏蔽的tokio工人仍然可以并发工作？
- 为什么部分错误时会返回重复的部分视图
© www.soinside.com 2019 - 2024. All rights reserved.