五陵年少金市东,银鞍白马渡春风。这篇文章主要讲述如何在Android上导出Highstock / Highcharts图表?相关的知识,希望能为你提供帮助。
我使用Highstock构建了一个图表,它在Chrome中正常运行。我可以导出通常在Chrome中生成的图表。但是当我在android上测试时,“图表导出”不起作用。该图表不会像在Chrome中一样导出。通过Android上安装的应用程序,图表可以正常运行。当我尝试在Android上导出图表时,没有任何反应。在Chrome for Android中使用远程调试并单击导出按钮会显示以下错误:
【如何在Android上导出Highstock / Highcharts图表()】[干预]忽略尝试取消具有cancelable = false的touchstart事件,例如因为滚动正在进行且无法中断。
文章图片
我怎么解决这个问题?
已经在Android Highcharts库上测试过,它也没有用。我制作了导出设置,如下视频所示:https://www.youtube.com/watch?v=feoZdOYBiF0
我使用Ionic 3和Angular 5,这是我的代码:
App.module.ts
import { ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import * as Highcharts from 'highcharts';
import highcharts from 'angular-highcharts/highcharts';
import stock from 'highcharts/modules/stock.src';
import more from 'highcharts/highcharts-more.src';
export function highchartsModules(){
return [exporting, stock, more ];
}Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
months: [
'Janeiro', 'Fevereiro', 'Mar?o', 'Abril',
'Maio', 'Junho', 'Julho', 'Agosto',
'Setembro', 'Outubro', 'Novembro', 'Dezembro'
],
weekdays: [
'Domingo', 'Segunda-Feira', 'Ter?a-Feira', 'Quarta-Feira',
'Quinta-Feira', 'Sexta-Feira', 'Sábado'
],
shortMonths: [ "Jan" , "Fev" , "Mar" , "Abr" ,
"Mai" , "Jun" , "Jul" , "Aug" , "Set" , "Out" ,
"Nov" , "Dez"]
}});
@NgModule({
declarations: [ ... ],
imports: [ ChartModule ],
bootstrap: [IonicApp],
entryComponents: [...],
providers: [
{provide: HIGHCHARTS_MODULES, useFactory: highchartsModules},
]
})
export class AppModule { }
page.html中
<
ion-content>
<
div [chart]="stock" style="height: 510px;
min-width: 310px">
<
/div>
<
ion-content>
Page.ts
import { Chart } from 'angular-highcharts';
import * as Highcharts from "highcharts/highstock";
import { StockChart } from 'angular-highcharts';
@IonicPage()
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage { stock: StockChart;
@ViewChild('content') content: ElementRef;
constructor(...) {...this.humorList$.subscribe(items =>
{
this.stock = new StockChart({
rangeSelector: {
selected : 1,
enabled:true
},chart: {
type: 'spline',
},
exporting: {
dateFormat:"%d-%m-%Y",
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
credits: {
enabled: false
},
title: {
text: undefined
},
plotOptions: {
series: {
color: '#009c58',
},
spline: {
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null
}
}
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
scrollbar: {
enabled: false
}
},
yAxis: {
opposite: true,
min: 0,
max: 9,
type: "category",
categories: [...],
labels: {
reserveSpace: false,
style: {
fontSize: '10px',
opacity: 0.55
}
},
title: {
text: undefined
},
minorGridLineWidth: null,
alternateGridColor: '#dff9ce',
gridLineColor: '#a0d87c',
gridLineWidth: 0.5
},
series: [{
name: 'Humor',
data: [...]
}],});
});
}
有人可以帮帮我吗?如果可能的话,我想看一个代码示例。
答案据我所知,图表不会在角度嵌入渲染引擎中渲染。我建议使用adb来远程调试你的应用程序。记录消息可能正在呈现给控制台。
推荐阅读
- 在create-react-app中调试es6
- Android Studio中未生成MainActivityBinding文件
- ClassNotFoundException(没有找到类“android.databinding.DataBinderMapper”)
- 声卡驱动不了!装好但不发声,或装驱动过程中
- 教你为啥开机必须按F1才能进入系统
- 为啥网上邻居别的电脑访问不到我的电脑?
- 为啥装这个系统后我的硬盘变成可插拨设备了
- 装好系统后打开速度很慢怎样办?
- 分享英语XP设置系统的汉字乱码疑难杂症