在Hugo中开启Highcharts图表支持
文章目录
基于在Hugo中开启图表支持一文，简要说明如何在Hugo中基于Markdown以优雅的方式集成Highcharts。
修改过程
-
在
assets/sass/_custom_custom.scss中添加如下代码1 2 3.highcharts { border: 1px dashed #c9c9c9; } -
在
layouts/_default/_markup创建文件render-codeblock-highcharts.html并添加如下代码1 2 3<div id="highcharts_{{ .Ordinal }}" class="highcharts"> {{- .Inner }} </div> -
在
layouts/partials/scripts.html补充原有的代码，添加上初始化功能1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<!-- highcharts js --> {{- if and (or .Params.highchartsDiagrams.enable (and .Site.Params.highchartsDiagrams.enable (ne .Params.highchartsDiagrams.enable false))) (or .IsPage .IsHome) -}} <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-3d.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/tilemap.js"></script> <script src="https://code.highcharts.com/modules/sankey.js"></script> <!-- depends on your requirements,needs to add more extra js file --> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', initHighcharts); function initHighcharts(){ let highchartsPageOptions = {{ .Page.Params.highchartsDiagrams.options }}; let highchartsSiteOptions = {{ .Site.Params.highchartsDiagrams.options }}; highchartsPageOptions = !!highchartsPageOptions ? highchartsPageOptions : "{}" highchartsSiteOptions = !!highchartsSiteOptions ? highchartsSiteOptions : "{}" highchartsPageOptions = eval("(" + highchartsPageOptions + ")") highchartsSiteOptions = eval("(" + highchartsSiteOptions + ")") // page options have high priority then site options let highchartsOptions = {...highchartsSiteOptions, ...highchartsPageOptions}; let highchartsConfigs = document.querySelectorAll("[id^=highcharts_]"); console.log(highchartsOptions) for(config of highchartsConfigs){ let chartData = eval("(" + config.innerText + ")"); chartData = {...highchartsOptions,...chartData} Highcharts.chart(config.id,chartData); } } </script> {{- end }} -
在对应的
markdown页面头部开启highcharts的展示，可根据实际情况添加自定义配置1 2 3 4 5 6 7 8 9 10 11highchartsDiagrams: enable: true options: " { subtitle: { style: { color: 'red' } } } " -
仿照如下的代码，将
Highcharts的代码块以JavaScript对象的形式加入特定Markdown代码标签中，注意JavaScript代码中不要加入任何注释，否则会导致程序解析出错!1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66```highcharts { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in May, 2020', align: 'left' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 70.67, sliced: true, selected: true }, { name: 'Edge', y: 14.77 }, { name: 'Firefox', y: 4.86 }, { name: 'Safari', y: 2.63 }, { name: 'Internet Explorer', y: 1.53 }, { name: 'Opera', y: 1.40 }, { name: 'Sogou Explorer', y: 0.84 }, { name: 'QQ', y: 0.51 }, { name: 'Other', y: 2.6 }] }] } ```让
Hugo重新选然后即可展示出类似如下效果{ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in May, 2020', align: 'left' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, accessibility: { point: { valueSuffix: '%' } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 70.67, sliced: true, selected: true }, { name: 'Edge', y: 14.77 }, { name: 'Firefox', y: 4.86 }, { name: 'Safari', y: 2.63 }, { name: 'Internet Explorer', y: 1.53 }, { name: 'Opera', y: 1.40 }, { name: 'Sogou Explorer', y: 0.84 }, { name: 'QQ', y: 0.51 }, { name: 'Other', y: 2.6 }] }] }
展示效果
处于篇幅考虑，在展示部分只展示最终效果，原始代码请参见enable-highcharts-in-hugo.md
图1-Bubble chart
{
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%.'
}
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}],
accessibility: {
rangeDescription: 'Range: 60 to 100 grams.'
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}],
accessibility: {
rangeDescription: 'Range: 0 to 160 grams.'
}
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
],
colorByPoint: true
}]
}
图2-Basic column
{
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: [{
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]
}, {
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]
}, {
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]
}, {
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]
}]
}
图3-Basic line
{
title: {
text: 'U.S Solar Employment Growth by Job Category, 2010-2020',
align: 'left'
},
subtitle: {
text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>',
align: 'left'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
xAxis: {
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation & Developers',
data: [43934, 48656, 65165, 81827, 112143, 142383,
171533, 165174, 155157, 161454, 154610]
}, {
name: 'Manufacturing',
data: [24916, 37941, 29742, 29851, 32490, 30282,
38121, 36885, 33726, 34243, 31050]
}, {
name: 'Sales & Distribution',
data: [11744, 30000, 16005, 19771, 20185, 24377,
32147, 30912, 29243, 29213, 25663]
}, {
name: 'Operations & Maintenance',
data: [null, null, null, null, null, null, null,
null, 11164, 11218, 10077]
}, {
name: 'Other',
data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
17300, 13053, 11906, 10073]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
}
图4-3D donut
{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Beijing 2022 gold medals by country',
align: 'left'
},
subtitle: {
text: '3D donut in Highcharts',
align: 'left'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Medals',
data: [
['Norway', 16],
['Germany', 12],
['USA', 8],
['Sweden', 8],
['Netherlands', 8],
['ROC', 6],
['Austria', 7],
['Canada', 4],
['Japan', 3]
]
}]
}
图5-Tile map
{
chart: {
type: 'tilemap',
inverted: true,
height: '80%'
},
accessibility: {
description: 'A tile map represents the states of the USA by population in 2016. The hexagonal tiles are positioned to geographically echo the map of the USA. A color-coded legend states the population levels as below 1 million (beige), 1 to 5 million (orange), 5 to 20 million (pink) and above 20 million (hot pink). The chart is interactive, and the individual state data points are displayed upon hovering. Three states have a population of above 20 million: California (39.3 million), Texas (27.9 million) and Florida (20.6 million). The northern US region from Massachusetts in the Northwest to Illinois in the Midwest contains the highest concentration of states with a population of 5 to 20 million people. The southern US region from South Carolina in the Southeast to New Mexico in the Southwest contains the highest concentration of states with a population of 1 to 5 million people. 6 states have a population of less than 1 million people; these include Alaska, Delaware, Wyoming, North Dakota, South Dakota and Vermont. The state with the lowest population is Wyoming in the Northwest with 584,153 people.',
screenReaderSection: {
beforeChartFormat:
'<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
},
point: {
valueDescriptionFormat: '{index}. {xDescription}, {point.value}.'
}
},
title: {
text: 'U.S. states by population in 2016'
},
subtitle: {
text: 'Source:<a href="https://simple.wikipedia.org/wiki/List_of_U.S._states_by_population">Wikipedia</a>'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
colorAxis: {
dataClasses: [{
from: 0,
to: 1000000,
color: '#F9EDB3',
name: '< 1M'
}, {
from: 1000000,
to: 5000000,
color: '#FFC428',
name: '1M - 5M'
}, {
from: 5000000,
to: 20000000,
color: '#FF7987',
name: '5M - 20M'
}, {
from: 20000000,
color: '#FF2371',
name: '> 20M'
}]
},
tooltip: {
headerFormat: '',
pointFormat: 'The population of <b> {point.name}</b> is <b>{point.value}</b>'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.hc-a2}',
color: '#000000',
style: {
textOutline: false
}
}
}
},
series: [{
name: '',
data: [{
'hc-a2': 'AL',
name: 'Alabama',
region: 'South',
x: 6,
y: 7,
value: 4849377
}, {
'hc-a2': 'AK',
name: 'Alaska',
region: 'West',
x: 0,
y: 0,
value: 737732
}, {
'hc-a2': 'AZ',
name: 'Arizona',
region: 'West',
x: 5,
y: 3,
value: 6745408
}, {
'hc-a2': 'AR',
name: 'Arkansas',
region: 'South',
x: 5,
y: 6,
value: 2994079
}, {
'hc-a2': 'CA',
name: 'California',
region: 'West',
x: 5,
y: 2,
value: 39250017
}, {
'hc-a2': 'CO',
name: 'Colorado',
region: 'West',
x: 4,
y: 3,
value: 5540545
}, {
'hc-a2': 'CT',
name: 'Connecticut',
region: 'Northeast',
x: 3,
y: 11,
value: 3596677
}, {
'hc-a2': 'DE',
name: 'Delaware',
region: 'South',
x: 4,
y: 9,
value: 935614
}, {
'hc-a2': 'DC',
name: 'District of Columbia',
region: 'South',
x: 4,
y: 10,
value: 7288000
}, {
'hc-a2': 'FL',
name: 'Florida',
region: 'South',
x: 8,
y: 8,
value: 20612439
}, {
'hc-a2': 'GA',
name: 'Georgia',
region: 'South',
x: 7,
y: 8,
value: 10310371
}, {
'hc-a2': 'HI',
name: 'Hawaii',
region: 'West',
x: 8,
y: 0,
value: 1419561
}, {
'hc-a2': 'ID',
name: 'Idaho',
region: 'West',
x: 3,
y: 2,
value: 1634464
}, {
'hc-a2': 'IL',
name: 'Illinois',
region: 'Midwest',
x: 3,
y: 6,
value: 12801539
}, {
'hc-a2': 'IN',
name: 'Indiana',
region: 'Midwest',
x: 3,
y: 7,
value: 6596855
}, {
'hc-a2': 'IA',
name: 'Iowa',
region: 'Midwest',
x: 3,
y: 5,
value: 3107126
}, {
'hc-a2': 'KS',
name: 'Kansas',
region: 'Midwest',
x: 5,
y: 5,
value: 2904021
}, {
'hc-a2': 'KY',
name: 'Kentucky',
region: 'South',
x: 4,
y: 6,
value: 4413457
}, {
'hc-a2': 'LA',
name: 'Louisiana',
region: 'South',
x: 6,
y: 5,
value: 4649676
}, {
'hc-a2': 'ME',
name: 'Maine',
region: 'Northeast',
x: 0,
y: 11,
value: 1330089
}, {
'hc-a2': 'MD',
name: 'Maryland',
region: 'South',
x: 4,
y: 8,
value: 6016447
}, {
'hc-a2': 'MA',
name: 'Massachusetts',
region: 'Northeast',
x: 2,
y: 10,
value: 6811779
}, {
'hc-a2': 'MI',
name: 'Michigan',
region: 'Midwest',
x: 2,
y: 7,
value: 9928301
}, {
'hc-a2': 'MN',
name: 'Minnesota',
region: 'Midwest',
x: 2,
y: 4,
value: 5519952
}, {
'hc-a2': 'MS',
name: 'Mississippi',
region: 'South',
x: 6,
y: 6,
value: 2984926
}, {
'hc-a2': 'MO',
name: 'Missouri',
region: 'Midwest',
x: 4,
y: 5,
value: 6093000
}, {
'hc-a2': 'MT',
name: 'Montana',
region: 'West',
x: 2,
y: 2,
value: 1023579
}, {
'hc-a2': 'NE',
name: 'Nebraska',
region: 'Midwest',
x: 4,
y: 4,
value: 1881503
}, {
'hc-a2': 'NV',
name: 'Nevada',
region: 'West',
x: 4,
y: 2,
value: 2839099
}, {
'hc-a2': 'NH',
name: 'New Hampshire',
region: 'Northeast',
x: 1,
y: 11,
value: 1326813
}, {
'hc-a2': 'NJ',
name: 'New Jersey',
region: 'Northeast',
x: 3,
y: 10,
value: 8944469
}, {
'hc-a2': 'NM',
name: 'New Mexico',
region: 'West',
x: 6,
y: 3,
value: 2085572
}, {
'hc-a2': 'NY',
name: 'New York',
region: 'Northeast',
x: 2,
y: 9,
value: 19745289
}, {
'hc-a2': 'NC',
name: 'North Carolina',
region: 'South',
x: 5,
y: 9,
value: 10146788
}, {
'hc-a2': 'ND',
name: 'North Dakota',
region: 'Midwest',
x: 2,
y: 3,
value: 739482
}, {
'hc-a2': 'OH',
name: 'Ohio',
region: 'Midwest',
x: 3,
y: 8,
value: 11614373
}, {
'hc-a2': 'OK',
name: 'Oklahoma',
region: 'South',
x: 6,
y: 4,
value: 3878051
}, {
'hc-a2': 'OR',
name: 'Oregon',
region: 'West',
x: 4,
y: 1,
value: 3970239
}, {
'hc-a2': 'PA',
name: 'Pennsylvania',
region: 'Northeast',
x: 3,
y: 9,
value: 12784227
}, {
'hc-a2': 'RI',
name: 'Rhode Island',
region: 'Northeast',
x: 2,
y: 11,
value: 1055173
}, {
'hc-a2': 'SC',
name: 'South Carolina',
region: 'South',
x: 6,
y: 8,
value: 4832482
}, {
'hc-a2': 'SD',
name: 'South Dakota',
region: 'Midwest',
x: 3,
y: 4,
value: 853175
}, {
'hc-a2': 'TN',
name: 'Tennessee',
region: 'South',
x: 5,
y: 7,
value: 6651194
}, {
'hc-a2': 'TX',
name: 'Texas',
region: 'South',
x: 7,
y: 4,
value: 27862596
}, {
'hc-a2': 'UT',
name: 'Utah',
region: 'West',
x: 5,
y: 4,
value: 2942902
}, {
'hc-a2': 'VT',
name: 'Vermont',
region: 'Northeast',
x: 1,
y: 10,
value: 626011
}, {
'hc-a2': 'VA',
name: 'Virginia',
region: 'South',
x: 5,
y: 8,
value: 8411808
}, {
'hc-a2': 'WA',
name: 'Washington',
region: 'West',
x: 2,
y: 1,
value: 7288000
}, {
'hc-a2': 'WV',
name: 'West Virginia',
region: 'South',
x: 4,
y: 7,
value: 1850326
}, {
'hc-a2': 'WI',
name: 'Wisconsin',
region: 'Midwest',
x: 2,
y: 5,
value: 5778708
}, {
'hc-a2': 'WY',
name: 'Wyoming',
region: 'West',
x: 3,
y: 3,
value: 584153
}]
}]
}
图6-Sankey diagram
{
title: {
text: 'Highcharts Sankey Diagram'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1],
['USA', 'Portugal', 1],
['USA', 'France', 1],
['USA', 'Spain', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['Portugal', 'Senegal', 1],
['Portugal', 'Morocco', 1],
['Portugal', 'South Africa', 3],
['France', 'Angola', 1],
['France', 'Senegal', 3],
['France', 'Mali', 3],
['France', 'Morocco', 3],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Spain', 'Morocco', 3],
['Spain', 'South Africa', 1],
['England', 'Angola', 1],
['England', 'Senegal', 1],
['England', 'Morocco', 2],
['England', 'South Africa', 7],
['South Africa', 'China', 5],
['South Africa', 'India', 1],
['South Africa', 'Japan', 3],
['Angola', 'China', 5],
['Angola', 'India', 1],
['Angola', 'Japan', 3],
['Senegal', 'China', 5],
['Senegal', 'India', 1],
['Senegal', 'Japan', 3],
['Mali', 'China', 5],
['Mali', 'India', 1],
['Mali', 'Japan', 3],
['Morocco', 'China', 5],
['Morocco', 'India', 1],
['Morocco', 'Japan', 3]
],
type: 'sankey',
name: 'Sankey demo series'
}]
}
图7-Gauge series
{
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: '80%'
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -90,
endAngle: 89.9,
background: null,
center: ['50%', '75%'],
size: '110%'
},
yAxis: {
min: 0,
max: 200,
tickPixelInterval: 72,
tickPosition: 'inside',
tickColor: Highcharts.defaultOptions.chart.backgroundColor || '#FFFFFF',
tickLength: 20,
tickWidth: 2,
minorTickInterval: null,
labels: {
distance: 20,
style: {
fontSize: '14px'
}
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B',
thickness: 20
}, {
from: 120,
to: 160,
color: '#DDDF0D',
thickness: 20
}, {
from: 160,
to: 200,
color: '#DF5353',
thickness: 20
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
},
dataLabels: {
format: '{y} km/h',
borderWidth: 0,
color: (
Highcharts.defaultOptions.title &&
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || '#333333',
style: {
fontSize: '16px'
}
},
dial: {
radius: '80%',
backgroundColor: 'gray',
baseWidth: 12,
baseLength: '0%',
rearLength: '0%'
},
pivot: {
backgroundColor: 'gray',
radius: 6
}
}]
}
图8-Arc diagram
{
colors: ['#293462', '#a64942', '#fe5f55', '#fff1c1', '#5bd1d7', '#ff502f', '#004d61', '#ff8a5c', '#fff591', '#f5587b', '#fad3cf', '#a696c8', '#5BE7C4', '#266A2E', '#593E1A'],
title: {
text: 'Main train connections in Europe'
},
accessibility: {
description: 'Arc diagram chart with circles of different sizes along the X axis, and connections drawn as arcs between them. From the chart we can see that Paris is the city with the most connections to other cities.',
point: {
valueDescriptionFormat: 'Connection from {point.from} to {point.to}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
type: 'arcdiagram',
name: 'Train connections',
linkWeight: 1,
centeredLinks: true,
dataLabels: {
rotation: 90,
y: 30,
align: 'left',
color: 'black'
},
offset: '65%',
data: [
['Hamburg', 'Stuttgart', 1],
['Hamburg', 'Frankfurt', 1],
['Hamburg', 'München', 1],
['Hannover', 'Wien', 1],
['Hannover', 'München', 1],
['Berlin', 'Wien', 1],
['Berlin', 'München', 1],
['Berlin', 'Stuttgart', 1],
['Berlin', 'Frankfurt', 1],
['Berlin', 'Köln', 1],
['Berlin', 'Düsseldorf', 1],
['München', 'Düsseldorf', 1],
['München', 'Wien', 1],
['München', 'Frankfurt', 1],
['München', 'Köln', 1],
['München', 'Amsterdam', 1],
['Stuttgart', 'Wien', 1],
['Frankfurt', 'Wien', 1],
['Frankfurt', 'Amsterdam', 1],
['Frankfurt', 'Paris', 1],
['Frankfurt', 'Budapest', 1],
['Düsseldorf', 'Wien', 1],
['Düsseldorf', 'Hamburg', 1],
['Amsterdam', 'Paris', 1],
['Paris', 'Brest', 1],
['Paris', 'Nantes', 1],
['Paris', 'Bayonne', 1],
['Paris', 'Bordeaux', 1],
['Paris', 'Toulouse', 1],
['Paris', 'Montpellier', 1],
['Paris', 'Marseille', 1],
['Paris', 'Nice', 1],
['Paris', 'Milano', 1],
['Nantes', 'Nice', 1],
['Bordeaux', 'Lyon', 1],
['Nantes', 'Lyon', 1],
['Milano', 'München', 1],
['Milano', 'Roma', 1],
['Milano', 'Bari', 1],
['Milano', 'Napoli', 1],
['Milano', 'Brindisi', 1],
['Milano', 'Lamezia Terme', 1],
['Torino', 'Roma', 1],
['Venezia', 'Napoli', 1],
['Roma', 'Bari', 1],
['Roma', 'Catania', 1],
['Roma', 'Brindisi', 1],
['Catania', 'Milano', 1]
]
}]
}
特殊图表
对于某些复杂的Highcharts图表，可尝试将其转化为一个JavaScript对象以兼容前述的实现方案，保持优雅。若实现难度较大，可将相关的html代码直接嵌入markdown中来实现相关功能，但通过此种方式会导致无法对相关的图表进行动态配置。
下述为一个示例展示，个人推荐直接嵌入html代码。