本文整理汇总了TypeScript中highcharts.chart函数的典型用法代码示例。如果您正苦于以下问题：TypeScript chart函数的具体用法？TypeScript chart怎么用？TypeScript chart使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了chart函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: test_basic
function test_basic() {
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Highcharts Annotations'
},
series: [{
type: 'line',
data: [{ y: 29.9, id: 'min' }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, { y: 216.4, id: 'max' }, 194.1, 95.6, 54.4]
}],
annotations: [{
labels: [{
point: 'max',
text: 'Max'
}, {
point: 'min',
text: 'Min',
backgroundColor: 'white'
}]
}]
});
}示例2: test_simple
function test_simple() {
Highcharts.chart('container', {
plotOptions: {
series: {
// general options for all series
},
organization: {
// shared options for all organization series
}
},
series: [{
// specific options for this series instance
type: 'organization',
data: [{
from: 'Category1',
to: 'Category2',
weight: 2
}, {
from: 'Category1',
to: 'Category3',
weight: 5
}]
}]
});
}示例3: test_3DColumn
/**
* Tests Highcharts.seriesTypes.column in a 3D use case.
*
* @todo
* - Make test more complex.
*/
function test_3DColumn() {
Highcharts.chart('container', {
title: {
text: 'Chart rotation demo'
},
chart: {
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});
}示例4: test_seriesAreaRange
/**
* Tests special use case of Highcharts.seriesTypes.arearange.
*/
function test_seriesAreaRange() {
Highcharts.chart('container', {
tooltip: {
formatter: function() {
const high = this.point['high'] as number;
return high.toString();
}
},
series: [{
type: 'arearange',
data: []
}]
});
}示例5: test_options
function test_options() {
Highcharts.chart('container', {
chart: {
animation: false
},
title: {
text: 'Highcharts draggable points demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
softMin: -200,
softMax: 400
},
plotOptions: {
series: {
stickyTracking: false,
dragDrop: {
draggableY: true
}
},
column: {
stacking: 'normal',
minPointLength: 2
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: [0, 71.5, -106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
-95.6, 54.4],
type: 'column'
}, {
data: [0, -71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
95.6, 54.4].reverse(),
type: 'column'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
95.6, 54.4],
type: 'line'
}]
});
}示例6: test_AreaRange
/**
* Tests Highcharts.seriesTypes.arearange in a complex use case.
*
* @todo
* - Make it more complex.
*/
function test_AreaRange() {
Highcharts.chart('container', {
title: {
text: 'Temperature variation by day'
},
chart: {
polar: true
},
legend: {
enabled: false
},
plotOptions: {
series: {
// general options for all series
},
arearange: {
// shared options for all arearange series
}
},
series: [{
// specific options for this series instance
name: 'Temperatures',
type: 'arearange',
data: [
[1483232400000, 1.4, 4.7],
[1483318800000, -1.3, 1.9],
[1483405200000, -0.7, 4.3],
[1483491600000, -5.5, 3.2],
[1483578000000, -9.9, -6.6]
],
color: '#C00'
}],
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: undefined
}
}
});
}示例7: test_seriesColumn
function test_seriesColumn() {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
type: 'column',
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
type: 'column',
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
type: 'column',
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
type: 'column',
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
}示例8: test_seriesPie
function test_seriesPie() {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: undefined, // null
plotBorderWidth: undefined, // null
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Brands',
// colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
}示例9: test_seriesBar
function test_seriesBar() {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify' as any
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
type: 'bar',
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
type: 'bar',
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
type: 'bar',
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
type: 'bar',
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
}示例10: test_seriesLine
function test_seriesLine() {
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
type: 'line',
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
type: 'line',
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
type: 'line',
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
type: 'line',
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
type: 'line',
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}