highcharts - Highchart-graph 没有出现在 Internet Explorer 中
问题描述
我在 Highcharts 中计算了一个图表,该图表在除 Internet Explorer 之外的任何浏览器中都表现得非常好(参见https://jsfiddle.net/statistik_tg/e69Lp3cv/)。我必须添加一个向下钻取和向上钻取作为主图表,并且向下钻取图表包括其他指标。从那时起,它就没有在 IE 中工作。有人知道让代码也可以在 IE 中运行的解决方案吗?提前致谢!
$(document).ready(function() {
var chart = {
type: 'column',
marginBottom: 220,
spacingBottom: 85,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Thurgau': {
name: 'Übrige',
color: '#878787',
data: [
['2009', 106],
['2010', 107],
['2011', 102],
['2012', 102],
['2013', 100],
['2014', 102],
['2015', 107],
['2016', 120],
['2017', 121]
]
}
},
drilldowns2 = {
'Thurgau': {
name: 'Phyisotherapie',
color: '#B5B5B5',
data: [
['2009', 79],
['2010', 83],
['2011', 82],
['2012', 85],
['2013', 89],
['2014', 103],
['2015', 115],
['2016', 128],
['2017', 132]
]
}
},
drilldowns3 = {
'Thurgau': {
name: 'Laboratorien',
color: '#E39E00',
data: [
['2009', 42],
['2010', 43],
['2011', 45],
['2012', 48],
['2013', 55],
['2014', 57],
['2015', 63],
['2016', 69],
['2017', 73]
]
}
},
drilldowns4 = {
'Thurgau': {
name: 'Spitex',
color: '#CD3700',
data: [
['2009', 48],
['2010', 49],
['2011', 53],
['2012', 58],
['2013', 62],
['2014', 68],
['2015', 75],
['2016', 80],
['2017', 83]
]
}
},
drilldowns5 = {
'Thurgau': {
name: 'Pflegeheime',
color: '#8B0000',
data: [
['2009', 192],
['2010', 186],
['2011', 182],
['2012', 182],
['2013', 179],
['2014', 169],
['2015', 171],
['2016', 175],
['2017', 173]
]
}
},
drilldowns6 = {
'Thurgau': {
name: 'Apotheken',
color: '#FFED00',
data: [
['2009', 119],
['2010', 121],
['2011', 126],
['2012', 136],
['2013', 141],
['2014', 145],
['2015', 159],
['2016', 178],
['2017', 188]
]
}
},
drilldowns7 = {
'Thurgau': {
name: 'Ärzte Laboranalysen',
color: '#00B4E8',
data: [
['2009', 52],
['2010', 45],
['2011', 46],
['2012', 47],
['2013', 51],
['2014', 54],
['2015', 58],
['2016', 61],
['2017', 62]
]
}
},
drilldowns8 = {
'Thurgau': {
name: 'Ärzte Medikamente',
color: '#0064e6',
data: [
['2009', 339],
['2010', 331],
['2011', 327],
['2012', 329],
['2013', 335],
['2014', 330],
['2015', 342],
['2016', 361],
['2017', 369]
]
}
},
drilldowns9 = {
'Thurgau': {
name: 'Ärzte Behandlung (ohne Labor)',
color: '#27408B',
data: [
['2009', 477],
['2010', 490],
['2011', 509],
['2012', 521],
['2013', 563],
['2014', 586],
['2015', 632],
['2016', 646],
['2017', 655]
]
}
},
drilldowns10 = {
'Thurgau': {
name: 'Spital ambulant',
color: '#a2c510',
data: [
['2009', 474],
['2010', 481],
['2011', 524],
['2012', 533],
['2013', 579],
['2014', 597],
['2015', 602],
['2016', 658],
['2017', 675]
]
}
},
drilldowns11 = {
'Thurgau': {
name: 'Spital stationär',
color: '#3CA433',
data: [
['2009', 724],
['2010', 733],
['2011', 736],
['2012', 727],
['2013', 874],
['2014', 865],
['2015', 844],
['2016', 833],
['2017', 793]
]
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name];
series3 = drilldowns3[e.point.name];
series4 = drilldowns4[e.point.name];
series5 = drilldowns5[e.point.name];
series6 = drilldowns6[e.point.name];
series7 = drilldowns7[e.point.name];
series8 = drilldowns8[e.point.name];
series9 = drilldowns9[e.point.name];
series10 = drilldowns10[e.point.name];
series11 = drilldowns11[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.addSingleSeriesAsDrilldown(e.point, series4);
chart.addSingleSeriesAsDrilldown(e.point, series5);
chart.addSingleSeriesAsDrilldown(e.point, series6);
chart.addSingleSeriesAsDrilldown(e.point, series7);
chart.addSingleSeriesAsDrilldown(e.point, series8);
chart.addSingleSeriesAsDrilldown(e.point, series9);
chart.addSingleSeriesAsDrilldown(e.point, series10);
chart.addSingleSeriesAsDrilldown(e.point, series11);
chart.applyDrilldown();
chart.yAxis[0].update({
min: 0,
max: 4000
})
}
},
drillup(){
this.yAxis[0].update({
min: 0,
max: 100
})
}
}
};
var plotOptions = {
column: {
stacking: 'normal'
}
};
var title = {
text: "Fast die Hälfte der Kosten im Kanton Thurgau für Spitalbehandlungen",
style: {
fontSize: '18px',
},
align: 'left'
};
var subtitle = {
text: 'Struktur der Bruttokosten nach Kostengruppe, Kanton Thurgau und Schweiz, 2017, Anteile in %/CHF pro versicherte Person¹',
style: {
fontSize: '12px'
},
align: 'left'
};
var yAxis = {
gridLineWidth: 1,
title: '',
lineWidth: 1,
max: 100
};
var xAxis = {
type: 'category'
};
var tooltip = {
valueSuffix: ' CHF'
};
var series = [{
name: 'Übrige',
tooltip: {
valueSuffix: ' %'
},
color: '#878787',
data: [{
name: 'Thurgau',
y: 3.7,
drilldown: true
},{
name: 'Schweiz',
y: 3.5,
drilldown: false
}]
},{
name: 'Physiotherapie',
tooltip: {
valueSuffix: ' %'
},
color: '#B5B5B5',
data: [{
name: 'Thurgau',
y: 4.0,
drilldown: true
},{
name: 'Schweiz',
y: 3.1,
drilldown: false
}]
},{
name: 'Laboratorien',
color: '#E39E00',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.2,
drilldown: true
},{
name: 'Schweiz',
y: 2.8,
drilldown: false
}]
},{
name: 'Spitex',
color: '#CD3700',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.5,
drilldown: true
},{
name: 'Schweiz',
y: 2.7,
drilldown: false
}]
},{
name: 'Pflegeheime',
tooltip: {
valueSuffix: ' %'
},
color: '#8B0000',
data: [{
name: 'Thurgau',
y: 5.2,
drilldown: true
},{
name: 'Schweiz',
y: 5.7,
drilldown: false
}]
},{
name: 'Apotheken',
tooltip: {
valueSuffix: ' %'
},
color: '#FFED00',
data: [{
name: 'Thurgau',
y: 5.7,
drilldown: true
},{
name: 'Schweiz',
y: 11.8,
drilldown: false
}]
},{
name: 'Ärzte Laboranalysen',
tooltip: {
valueSuffix: ' %'
},
color: '#00B4E8',
data: [{
name: 'Thurgau',
y: 1.9,
drilldown: true
},{
name: 'Schweiz',
y: 1.7,
drilldown: false
}]
},{
name: 'Ärzte Medikamente',
tooltip: {
valueSuffix: ' %'
},
color: '#0064e6',
data: [{
name: 'Thurgau',
y: 11.1,
drilldown: true
},{
name: 'Schweiz',
y: 6.3,
drilldown: false
}]
},{
name: 'Ärzte Behandlungen (ohne Labor)',
tooltip: {
valueSuffix: ' %'
},
color: '#27408B',
data: [{
name: 'Thurgau',
y: 19.7,
drilldown: true
},{
name: 'Schweiz',
y: 22.6,
drilldown: false
}]
},{
name: 'Spital ambulant',
tooltip: {
valueSuffix: ' %'
},
color: '#a2c510',
data: [{
name: 'Thurgau',
y: 20.3,
drilldown: true
},{
name: 'Schweiz',
y: 19.1,
drilldown: false
}]
},{
name: 'Spital stationär',
tooltip: {
valueSuffix: ' %'
},
color: '#3CA433',
data: [{
name: 'Thurgau',
y: 23.8,
drilldown: true
},{
name: 'Schweiz',
y: 20.7,
drilldown: false
}]
}];
var drilldown = {
series: []
};
var legend = {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
padding: 25,
symbolPadding: 10,
symbolWidth: 25,
margin: -10,
/*maxHeight: 150,*/
alignColumns: false,
reversed: false,
itemStyle: {
fontWeight: 'normal'
}
};
var credits = {
text: '<b>Hinweis: Für den Vergleich der Kostenanteile im Kanton Thurgau von 2009-2017 klicken Sie <br><b>auf den Balken oder die Balkenbeschriftung zum Thurgau<br>¹ Vergleich Thurgau-Schweiz Anteile in %, Vergleich Thurgau 2009-2017 Anteile in CHF<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquellen: Bundesamt für Gesundheit, Monitoring der Krankenversicherungs-<br>Kostenentwicklung',
href: false,
style: {
color:'#999999',
cursor: false,
fontSize:'10px'
},
position: {
align: 'left',
x: 10,
y: -90
}
};
var exporting = {
allowHTML: true,
enabled: true,
filename:'2019_07_Krankenversicherungskosten_Brutto_2017',
buttons: {
contextButton: {
menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
}
},
/*csv: {
columnHeaderFormatter: function (item) {
if(item instanceof Highcharts.Axis) {
return 'Quartal';
} else {
if(item instanceof Highcharts.Series) {
return item.name;
}
}
}
}*/
};
var responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
};
var highchartsOptions = Highcharts.setOptions ({
lang: {
decimalPoint: '.',
thousandsSep: "'",
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
contextButtonTitle: 'Drucken, Download, Export',
downloadJPEG: 'Download JPEG Bild',
downloadPNG: 'Download PNG Bild',
downloadSVG: 'Download SVG Vektor Bild',
downloadXLS: 'Download XLS',
printChart: 'Bild drucken',
viewData: 'Datentabelle ein-/ausblenden',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen",
drillUpText: "Zurück",
numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
}
});
colors = ["#878787","#B5B5B5","#E39E00","#CD3700","#8B0000","#3CA433","#a2c510","#FFED00","#00B4E8","#0064e6","#27408B"]
var json = {};
json.chart = chart;
json.plotOptions = plotOptions;
json.title = title;
json.subtitle = subtitle;
json.yAxis = yAxis;
json.xAxis = xAxis;
json.tooltip = tooltip;
json.series = series;
json.drilldown = drilldown;
json.legend = legend;
json.credits = credits;
json.exporting = exporting;
json.responsive = responsive;
json.highchartsOptions = highchartsOptions;
json.colors = colors;
$('#2019_07_Krankenversicherungskosten_Brutto_2017').highcharts(json);
});
解决方案
推荐阅读
- php - 如何根据用户使用 PHP 的操作来增加变量
- python - 如何根据嵌套字典中的子值计算父字典值
- python - Matplotlib 绘制不同颜色的多边形
- c# - 自动映射器根据枚举值映射某些布尔属性
- javascript - 如何将href链接限制为
标签 - android - How to create POJO class for retrofit with dynamic keys names
- python - Python inheritance pattern - how to handle deserialization
- angular - 未能加载资源服务器响应状态为 404(未找到)角度 5
- azure - 如何从 Azure B2C Owin 登录跳转到 AD 图形 API
- javascript - 显示并点击 javascript 和 html