如何在 Highcharts 中重新创建与模拟中相同的图表？
How to re-create the same chart in Highcharts as seen on the mock?
我正在尝试使用 Highcharts 库重新创建以下折线图。有人能告诉我如何确保底部 x 轴上的年份从 2010 年开始一直到 2020 年。这一年只需重复一次。我还想知道如何设置与下图所示相同的 y 轴标签：
这是我的代码的样子：
https://jsfiddle.net/samwhite/w4rtk15g/3/
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Inflation'
}
},
xAxis: {
type: 'datetime',
},
});
这是目前为止我能得到的最接近的结果 - 我无法隐藏工具提示，但是，我认为它非常接近您想要的结果。
NOTE: The results of the chart depends of the data, so, the exact graphic lines aren't the same as in your image; this jsfiddle is an
example you can use for customize it.
请参阅此处 working jsfiddle。
代码：
/*
Sources:
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
* https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
* https://api.highcharts.com/class-reference/Highcharts#.DashStyleValue
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/labels-step/
* https://www.highcharts.com/docs/chart-concepts/understanding-highcharts
* https://www.highcharts.com/docs/chart-concepts/axes?_ga=2.227511582.220005933.1619809828-761661522.1619809828
* https://api.highcharts.com/highcharts/yAxis.lineColor
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/linecolor/
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/tickcolor/
* https://api.highcharts.com/highcharts/yAxis.tickColor
*
*
*
*/
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: ''
},
labels: {
format: '{value:.1f}%',
valueDecimals: 1,
step: 2, // i.e: 0.1, 0.2, etc. It depends of the data, though.
// Style: not sure if there is a better way:
// Source: https://api.highcharts.com/highmaps/colorAxis.labels.style
style: {
color: '#000000'
}
},
custom: {
allowNegativeLog: false
},
plotLines: [{
color: 'black', // Color value
dashStyle: 'LongDash', // Style of the plot line. Default to solid
value: 0.1, // Value of where the line will appear
width: 4 // Width of the line
}],
// Color of the y-axis line:
lineColor: '#000000',
lineWidth: 3,
// Color of the y-axis tick lines:
tickColor: '#000000',
tickWidth: 3,
// Hide grid-lines on the y-axis:
gridLineWidth: 0
},
xAxis: {
type: 'datetime',
labels: {
step: 4, // i.e: 1950, 1990, etc. It depends of the data, though.
// Style: not sure if there is a better way:
// Source: https://api.highcharts.com/highmaps/colorAxis.labels.style
style: {
color: '#000000'
}
},
plotBands: [
// set the gray plotBand.
{
color: '#D2DAE6',
from: Date.UTC(1952, 0, 2), // Start of the plot band
to: Date.UTC(1957, 0, 4) // End of the plot band
},
// set the yellow plotBand.
{
color: '#FDED96',
from: Date.UTC(1968, 0, 2), // Start of the plot band
to: Date.UTC(1970, 0, 4) // End of the plot band
}
],
// Color of the x-axis line:
lineColor: '#000000',
lineWidth: 3,
// Color of the x-axis tick lines:
tickColor: '#000000',
tickWidth: 3
},
plotOptions: {
series: {
pointStart: 2010
}
},
legend: {
/*layout: 'vertical',
align: 'right',
verticalAlign: 'middle'*/
enabled: false
},
tooltip: {
enabled: true,
valueDecimals: 2
},
colors: [
"#000000"
],
series: [{
name: 'Inflation',
data: [{
"x": -694310400000.0,
"y": 0.10242085661080069
}, {
"x": -691632000000.0,
"y": 0.09481961147086038
}, {
"x": -689126400000.0,
"y": 0.06818181818181812
}, {
"x": -686448000000.0,
"y": 0.08272727272727276
}, {
"x": -683856000000.0,
"y": 0.09384965831435088
}, {
"x": -681177600000.0,
"y": 0.09375
}, {
"x": -678585600000.0,
"y": 0.09761583445793964
}, {
"x": -675907200000.0,
"y": 0.09062499999999996
}, {
"x": -673228800000.0,
"y": 0.06654991243432562
}, {
"x": -670636800000.0,
"y": 0.061108686163247494
}, {
"x": -667958400000.0,
"y": 0.047701647875108444
}, {
"x": -665366400000.0,
"y": 0.02733874412644166
}, {
"x": -662688000000.0,
"y": 0.013935810810810967
}, {
"x": -660009600000.0,
"y": 0.010139416983523386
}, {
"x": -657590400000.0,
"y": 0.01744680851063829
}, {
"x": -654912000000.0,
"y": 0.004198152812762368
}, {
"x": -652320000000.0,
"y": -0.004164931278633932
}, {
"x": -649641600000.0,
"y": -0.009523809523809379
}, {
"x": -647049600000.0,
"y": -0.02868852459016391
}, {
"x": -644371200000.0,
"y": -0.02988129349160873
}, {
"x": -641692800000.0,
"y": -0.02504105090311981
}, {
"x": -639100800000.0,
"y": -0.026326614561908546
}, {
"x": -636422400000.0,
"y": -0.019039735099337762
}, {
"x": -633830400000.0,
"y": -0.018295218295218296
}, {
"x": -631152000000.0,
"y": -0.02082465639316955
}, {
"x": -628473600000.0,
"y": -0.012547051442910906
}, {
"x": -626054400000.0,
"y": -0.01129234629861986
}, {
"x": -623376000000.0,
"y": -0.011287625418060276
}, {
"x": -620784000000.0,
"y": -0.0058552906733584376
}, {
"x": -618105600000.0,
"y": -0.0016722408026756952
}, {
"x": -615513600000.0,
"y": 0.01561181434599157
}, {
"x": -612835200000.0,
"y": 0.021097046413502074
}, {
"x": -610156800000.0,
"y": 0.024842105263158
}, {
"x": -607564800000.0,
"y": 0.0350654837346851
}, {
"x": -604886400000.0,
"y": 0.03797468354430378
}, {
"x": -602294400000.0,
"y": 0.0580262600592969
}, {
"x": -599616000000.0,
"y": 0.07954062101233506
}, {
"x": -596937600000.0,
"y": 0.09402795425667088
}, {
"x": -594518400000.0,
"y": 0.09475465313028764
}, {
"x": -591840000000.0,
"y": 0.09598308668076116
}, {
"x": -589248000000.0,
"y": 0.09339503575936048
}, {
"x": -586569600000.0,
"y": 0.08584589614740379
}, {
"x": -583977600000.0,
"y": 0.07644370585791438
}, {
"x": -581299200000.0,
"y": 0.06859504132231398
}, {
"x": -578620800000.0,
"y": 0.06943303204601481
}, {
"x": -576028800000.0,
"y": 0.06775510204081625
}, {
"x": -573350400000.0,
"y": 0.06991869918699178
}, {
"x": -570758400000.0,
"y": 0.05964771817453962
}, {
"x": -568080000000.0,
"y": 0.042159180457052914
}, {
"x": -565401600000.0,
"y": 0.02245451025938827
}, {
"x": -562896000000.0,
"y": 0.019706336939721902
}, {
"x": -560217600000.0,
"y": 0.02083333333333326
}, {
"x": -557625600000.0,
"y": 0.018468641785302164
}, {
"x": -554947200000.0,
"y": 0.02313922097956045
}, {
"x": -552355200000.0,
"y": 0.029718255499807
}, {
"x": -549676800000.0,
"y": 0.03209590100541382
}, {
"x": -546998400000.0,
"y": 0.023050326546292688
}, {
"x": -544406400000.0,
"y": 0.020259938837920544
}, {
"x": -541728000000.0,
"y": 0.014057750759878473
}, {
"x": -539136000000.0,
"y": 0.009066868152625585
}, {
"x": -536457600000.0,
"y": 0.007183364839319584
}, {
"x": -533779200000.0,
"y": 0.006815600151457879
}, {
"x": -531360000000.0,
"y": 0.009094353921940135
}, {
"x": -528681600000.0,
"y": 0.008692365835222926
}, {
"x": -526089600000.0,
"y": 0.0086890819795995
}, {
"x": -523411200000.0,
"y": 0.009046362608367886
}, {
"x": -520819200000.0,
"y": 0.004122938530734643
}, {
"x": -518140800000.0,
"y": 0.005994754589734086
}, {
"x": -515462400000.0,
"y": 0.009763424708974844
}, {
"x": -512870400000.0,
"y": 0.009741476208317668
}, {
"x": -510192000000.0,
"y": 0.005994754589734086
}, {
"x": -507600000000.0,
"y": 0.005990265818045737
}, {
"x": -504921600000.0,
"y": 0.011261261261261257
}, {
"x": -502243200000.0,
"y": 0.015043249341857745
}, {
"x": -499824000000.0,
"y": 0.011265490048817162
}, {
"x": -497145600000.0,
"y": 0.006369426751592355
}, {
"x": -494553600000.0,
"y": 0.008614232209737782
}, {
"x": -491875200000.0,
"y": 0.00635039223010847
}, {
"x": -489283200000.0,
"y": 0.0026129152668905586
}, {
"x": -486604800000.0,
"y": 0.0
}, {
"x": -483926400000.0,
"y": -0.002975083674228385
}, {
"x": -481334400000.0,
"y": -0.008534322820037077
}, {
"x": -478656000000.0,
"y": -0.0026070763500931626
}, {
"x": -476064000000.0,
"y": -0.0037216226274656705
}, {
"x": -473385600000.0,
"y": -0.006310319227913919
}, {
"x": -470707200000.0,
"y": -0.006298629121896937
}, {
"x": -468288000000.0,
"y": -0.00519866320089124
}, {
"x": -465609600000.0,
"y": -0.002606105733432673
}, {
"x": -463017600000.0,
"y": -0.005941329372447068
}, {
"x": -460339200000.0,
"y": -0.008537490720118779
}, {
"x": -457747200000.0,
"y": -0.0037230081906179935
}, {
"x": -455068800000.0,
"y": -0.00484171322160154
}, {
"x": -452390400000.0,
"y": 0.0014919806042521522
}, {
"x": -449798400000.0,
"y": 0.0037425149700598404
}, {
"x": -447120000000.0,
"y": 0.0037341299477220424
}, {
"x": -444528000000.0,
"y": 0.0037355248412402897
}, {
"x": -441849600000.0,
"y": 0.002241314904743996
}, {
"x": -439171200000.0,
"y": 0.001491424310216205
}, {
"x": -436665600000.0,
"y": 0.0037327360955581312
}, {
"x": -433987200000.0,
"y": 0.005225830533781339
}, {
"x": -431395200000.0,
"y": 0.009712364587224576
}, {
"x": -428716800000.0,
"y": 0.01647323099962561
}, {
"x": -426124800000.0,
"y": 0.019805680119581393
}, {
"x": -423446400000.0,
"y": 0.02208083832335328
}, {
"x": -420768000000.0,
"y": 0.01862197392923659
}, {
"x": -418176000000.0,
"y": 0.02572706935123037
}, {
"x": -415497600000.0,
"y": 0.0234375
}, {
"x": -412905600000.0,
"y": 0.028284331968738252
}, {
"x": -410227200000.0,
"y": 0.03130823704808061
}, {
"x": -407548800000.0,
"y": 0.034996276991809516
}, {
"x": -405129600000.0,
"y": 0.03607288955001864
}, {
"x": -402451200000.0,
"y": 0.03713330857779429
}, {
"x": -399859200000.0,
"y": 0.03588605253422128
}, {
"x": -397180800000.0,
"y": 0.0353591160220994
}, {
"x": -394588800000.0,
"y": 0.03297911322828884
}, {
"x": -391910400000.0,
"y": 0.03551812522885389
}, {
"x": -389232000000.0,
"y": 0.03546617915904937
}, {
"x": -386640000000.0,
"y": 0.02944383860414379
}, {
"x": -383961600000.0,
"y": 0.03271537622682663
}, {
"x": -381369600000.0,
"y": 0.030401737242128135
}, {
"x": -378691200000.0,
"y": 0.035056017347307566
}, {
"x": -376012800000.0,
"y": 0.03237410071942448
}, {
"x": -373593600000.0,
"y": 0.03625269203158665
}, {
"x": -370915200000.0,
"y": 0.036161833154314316
}, {
"x": -368323200000.0,
"y": 0.033571428571428585
}, {
"x": -365644800000.0,
"y": 0.028459622909996485
}, {
"x": -363052800000.0,
"y": 0.02483150053210359
}, {
"x": -360374400000.0,
"y": 0.023338048090523422
}, {
"x": -357696000000.0,
"y": 0.02083333333333326
}, {
"x": -355104000000.0,
"y": 0.02083333333333326
}, {
"x": -352425600000.0,
"y": 0.019007391763463444
}, {
"x": -349833600000.0,
"y": 0.017562346329469625
}, {
"x": -347155200000.0,
"y": 0.012918994413407825
}, {
"x": -344476800000.0,
"y": 0.010452961672473782
}, {
"x": -342057600000.0,
"y": 0.003463803255975062
}, {
"x": -339379200000.0,
"y": 0.0013821700069107656
}, {
"x": -336787200000.0,
"y": 0.003455425017277136
}, {
"x": -334108800000.0,
"y": 0.006918021445866396
}, {
"x": -331516800000.0,
"y": 0.008999653859466772
}, {
"x": -328838400000.0,
"y": 0.008293020041465038
}, {
"x": -326160000000.0,
"y": 0.011760636457972984
}, {
"x": -323568000000.0,
"y": 0.015219647180906293
}, {
"x": -320889600000.0,
"y": 0.013816925734024155
}, {
"x": -318297600000.0,
"y": 0.015188125647221273
}, {
"x": -315619200000.0,
"y": 0.012409513960703222
}, {
"x": -312940800000.0,
"y": 0.014137931034482687
}, {
"x": -310435200000.0,
"y": 0.015188125647221273
}, {
"x": -307756800000.0,
"y": 0.019323671497584405
}, {
"x": -305164800000.0,
"y": 0.018250688705234275
}, {
"x": -302486400000.0,
"y": 0.017176228100309165
}, {
"x": -299894400000.0,
"y": 0.013722126929674117
}, {
"x": -297216000000.0,
"y": 0.01473612063056895
}, {
"x": -294537600000.0,
"y": 0.012307692307692353
}, {
"x": -291945600000.0,
"y": 0.013628620102214661
}, {
"x": -289267200000.0,
"y": 0.014650766609880739
}, {
"x": -286675200000.0,
"y": 0.013600816048962905
}, {
"x": -283996800000.0,
"y": 0.016002723867892366
}, {
"x": -281318400000.0,
"y": 0.014620877252635056
}, {
"x": -278899200000.0,
"y": 0.014620877252635056
}, {
"x": -276220800000.0,
"y": 0.009140148950575577
}, {
"x": -273628800000.0,
"y": 0.009130875887723988
}, {
"x": -270950400000.0,
"y": 0.0077676460655184965
}, {
"x": -268358400000.0,
"y": 0.012521150592216701
}, {
"x": -265680000000.0,
"y": 0.011144883485309176
}, {
"x": -263001600000.0,
"y": 0.012495778453225359
}, {
"x": -260409600000.0,
"y": 0.007731092436974896
}, {
"x": -257731200000.0,
"y": 0.00671591672263272
}, {
"x": -255139200000.0,
"y": 0.006709158000671067
}, {
"x": -252460800000.0,
"y": 0.006702412868632601
}, {
"x": -249782400000.0,
"y": 0.009048257372654245
}, {
"x": -247363200000.0,
"y": 0.011058981233244003
}, {
"x": -244684800000.0,
"y": 0.013418316001341912
}, {
"x": -242092800000.0,
"y": 0.013404825737265424
}, {
"x": -239414400000.0,
"y": 0.012399463806970434
}, {
"x": -236822400000.0,
"y": 0.010026737967914423
}, {
"x": -234144000000.0,
"y": 0.011356045424181671
}, {
"x": -231465600000.0,
"y": 0.014676450967311627
}, {
"x": -228873600000.0,
"y": 0.013342228152101399
}, {
"x": -226195200000.0,
"y": 0.013342228152101399
}, {
"x": -223603200000.0,
"y": 0.012329223592135952
}, {
"x": -220924800000.0,
"y": 0.013315579227696439
}, {
"x": -218246400000.0,
"y": 0.012288276320159497
}, {
"x": -215827200000.0,
"y": 0.011269472986410234
}, {
"x": -213148800000.0,
"y": 0.00893743793445867
}, {
"x": -210556800000.0,
"y": 0.008928571428571619
}, {
"x": -207878400000.0,
"y": 0.013240648791790655
}, {
"x": -205286400000.0,
"y": 0.015552614162806178
}, {
"x": -202608000000.0,
"y": 0.015521796565389767
}, {
"x": -199929600000.0,
"y": 0.009861932938855844
}, {
"x": -197337600000.0,
"y": 0.012179065174456882
}, {
"x": -194659200000.0,
"y": 0.013166556945358954
}, {
"x": -192067200000.0,
"y": 0.016458196181698526
}, {
"x": -189388800000.0,
"y": 0.016425755584756896
}, {
"x": -186710400000.0,
"y": 0.014107611548556331
}, {
"x": -184204800000.0,
"y": 0.014093739757456536
}, {
"x": -181526400000.0,
"y": 0.015419947506561726
}, {
"x": -178934400000.0,
"y": 0.015404785316289749
}, {
"x": -176256000000.0,
"y": 0.013067624959163693
}, {
"x": -173664000000.0,
"y": 0.010752688172043001
}, {
"x": -170985600000.0,
"y": 0.009756097560975618
}, {
"x": -168307200000.0,
"y": 0.01171875
}, {
"x": -165715200000.0,
"y": 0.012032520325203189
}, {
"x": -163036800000.0,
"y": 0.013970110461338558
}, {
"x": -160444800000.0,
"y": 0.011981865284974136
}, {
"x": -157766400000.0,
"y": 0.01098901098901095
}, {
"x": -155088000000.0,
"y": 0.011970236169524417
}, {
"x": -152668800000.0,
"y": 0.011958629605688387
}, {
"x": -149990400000.0,
"y": 0.013893376413570246
}, {
"x": -147398400000.0,
"y": 0.0161394448030987
}, {
"x": -144720000000.0,
"y": 0.019348597226700903
}, {
"x": -142128000000.0,
"y": 0.01805286911669879
}, {
"x": -139449600000.0,
"y": 0.016103059581320522
}, {
"x": -136771200000.0,
"y": 0.01737451737451745
}, {
"x": -134179200000.0,
"y": 0.017030848329048665
}, {
"x": -131500800000.0,
"y": 0.017302146747837144
}, {
"x": -128908800000.0,
"y": 0.019200000000000106
}, {
"x": -126230400000.0,
"y": 0.019181585677749302
}, {
"x": -123552000000.0,
"y": 0.025575447570332477
}, {
"x": -121132800000.0,
"y": 0.027786649632705274
}, {
"x": -118454400000.0,
"y": 0.028680688336520044
}, {
"x": -115862400000.0,
"y": 0.02763659466327839
}, {
"x": -113184000000.0,
"y": 0.024359379943056148
}, {
"x": -110592000000.0,
"y": 0.02754908169727699
}, {
"x": -107913600000.0,
"y": 0.034865293185419866
}, {
"x": -105235200000.0,
"y": 0.035736875395319334
}, {
"x": -102643200000.0,
"y": 0.03791469194312813
}, {
"x": -99964800000.0,
"y": 0.03559055118110255
}, {
"x": -97372800000.0,
"y": 0.033594976452119285
}, {
"x": -94694400000.0,
"y": 0.0319949811794229
}, {
"x": -92016000000.0,
"y": 0.028678304239401653
}, {
"x": -89596800000.0,
"y": 0.025481665630826544
}, {
"x": -86918400000.0,
"y": 0.025402726146220633
}, {
"x": -84326400000.0,
"y": 0.023183925811437467
}, {
"x": -81648000000.0,
"y": 0.028412600370598895
}, {
"x": -79056000000.0,
"y": 0.029275808936825687
}, {
"x": -76377600000.0,
"y": 0.026033690658499253
}, {
"x": -73699200000.0,
"y": 0.025954198473282508
}, {
"x": -71107200000.0,
"y": 0.025875190258751957
}, {
"x": -68428800000.0,
"y": 0.0310218978102188
}, {
"x": -65836800000.0,
"y": 0.03280680437424044
}, {
"x": -63158400000.0,
"y": 0.03647416413373872
}, {
"x": -60480000000.0,
"y": 0.036363636363636376
}, {
"x": -57974400000.0,
"y": 0.039393939393939315
}, {
"x": -55296000000.0,
"y": 0.0392749244712991
}, {
"x": -52704000000.0,
"y": 0.04229607250755274
}, {
"x": -50025600000.0,
"y": 0.042042042042042205
}, {
"x": -47433600000.0,
"y": 0.04491017964071853
}, {
"x": -44755200000.0,
"y": 0.04477611940298498
}, {
"x": -42076800000.0,
"y": 0.044642857142857206
}, {
"x": -39484800000.0,
"y": 0.047477744807121525
}, {
"x": -36806400000.0,
"y": 0.04424778761061954
}, {
"x": -34214400000.0,
"y": 0.04705882352941182
}, {
"x": -31536000000.0,
"y": 0.04692082111436946
}, {
"x": -28857600000.0,
"y": 0.04678362573099393
}, {
"x": -26438400000.0,
"y": 0.05247813411078739
}, {
"x": -23760000000.0,
"y": 0.05523255813953476
}, {
"x": -21168000000.0,
"y": 0.05507246376811592
}, {
"x": -18489600000.0,
"y": 0.054755043227665556
}, {
"x": -15897600000.0,
"y": 0.054441260744985565
}, {
"x": -13219200000.0,
"y": 0.05428571428571427
}, {
"x": -10540800000.0,
"y": 0.056980056980056926
}, {
"x": -7948800000.0,
"y": 0.056657223796034106
}, {
"x": -5270400000.0,
"y": 0.05932203389830515
}, {
"x": -2678400000.0,
"y": 0.0589887640449438
}, {
"x": 0.0,
"y": 0.06162464985994376
}, {
"x": 2678400000.0,
"y": 0.06424581005586605
}, {
"x": 5097600000.0,
"y": 0.06094182825484751
}, {
"x": 7776000000.0,
"y": 0.060606060606060774
}, {
"x": 10368000000.0,
"y": 0.06043956043956045
}, {
"x": 13046400000.0,
"y": 0.060109289617486183
}, {
"x": 15638400000.0,
"y": 0.057065217391304435
}, {
"x": 18316800000.0,
"y": 0.05691056910569103
}, {
"x": 20995200000.0,
"y": 0.05660377358490565
}, {
"x": 23587200000.0,
"y": 0.05630026809651478
}, {
"x": 26265600000.0,
"y": 0.05600000000000005
}, {
"x": 28857600000.0,
"y": 0.055702917771883076
}, {
"x": 31536000000.0,
"y": 0.05277044854881274
}, {
"x": 34214400000.0,
"y": 0.04724409448818889
}, {
"x": 36633600000.0,
"y": 0.044386422976501416
}, {
"x": 39312000000.0,
"y": 0.04155844155844157
}, {
"x": 41904000000.0,
"y": 0.04404145077720201
}, {
"x": 44582400000.0,
"y": 0.04381443298969079
}, {
"x": 47174400000.0,
"y": 0.04370179948586128
}, {
"x": 49852800000.0,
"y": 0.04358974358974366
}, {
"x": 52531200000.0,
"y": 0.04081632653061207
}, {
"x": 55123200000.0,
"y": 0.038071065989847774
}, {
"x": 57801600000.0,
"y": 0.03535353535353525
}, {
"x": 60393600000.0,
"y": 0.03266331658291466
}]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
我正在尝试使用 Highcharts 库重新创建以下折线图。有人能告诉我如何确保底部 x 轴上的年份从 2010 年开始一直到 2020 年。这一年只需重复一次。我还想知道如何设置与下图所示相同的 y 轴标签：
这是我的代码的样子： https://jsfiddle.net/samwhite/w4rtk15g/3/
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Inflation'
}
},
xAxis: {
type: 'datetime',
},
});
这是目前为止我能得到的最接近的结果 - 我无法隐藏工具提示，但是，我认为它非常接近您想要的结果。
NOTE: The results of the chart depends of the data, so, the exact graphic lines aren't the same as in your image; this jsfiddle is an example you can use for customize it.
请参阅此处 working jsfiddle。
代码：
/*
Sources:
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
* https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
* https://api.highcharts.com/class-reference/Highcharts#.DashStyleValue
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/labels-step/
* https://www.highcharts.com/docs/chart-concepts/understanding-highcharts
* https://www.highcharts.com/docs/chart-concepts/axes?_ga=2.227511582.220005933.1619809828-761661522.1619809828
* https://api.highcharts.com/highcharts/yAxis.lineColor
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/linecolor/
* https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/tickcolor/
* https://api.highcharts.com/highcharts/yAxis.tickColor
*
*
*
*/
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: ''
},
labels: {
format: '{value:.1f}%',
valueDecimals: 1,
step: 2, // i.e: 0.1, 0.2, etc. It depends of the data, though.
// Style: not sure if there is a better way:
// Source: https://api.highcharts.com/highmaps/colorAxis.labels.style
style: {
color: '#000000'
}
},
custom: {
allowNegativeLog: false
},
plotLines: [{
color: 'black', // Color value
dashStyle: 'LongDash', // Style of the plot line. Default to solid
value: 0.1, // Value of where the line will appear
width: 4 // Width of the line
}],
// Color of the y-axis line:
lineColor: '#000000',
lineWidth: 3,
// Color of the y-axis tick lines:
tickColor: '#000000',
tickWidth: 3,
// Hide grid-lines on the y-axis:
gridLineWidth: 0
},
xAxis: {
type: 'datetime',
labels: {
step: 4, // i.e: 1950, 1990, etc. It depends of the data, though.
// Style: not sure if there is a better way:
// Source: https://api.highcharts.com/highmaps/colorAxis.labels.style
style: {
color: '#000000'
}
},
plotBands: [
// set the gray plotBand.
{
color: '#D2DAE6',
from: Date.UTC(1952, 0, 2), // Start of the plot band
to: Date.UTC(1957, 0, 4) // End of the plot band
},
// set the yellow plotBand.
{
color: '#FDED96',
from: Date.UTC(1968, 0, 2), // Start of the plot band
to: Date.UTC(1970, 0, 4) // End of the plot band
}
],
// Color of the x-axis line:
lineColor: '#000000',
lineWidth: 3,
// Color of the x-axis tick lines:
tickColor: '#000000',
tickWidth: 3
},
plotOptions: {
series: {
pointStart: 2010
}
},
legend: {
/*layout: 'vertical',
align: 'right',
verticalAlign: 'middle'*/
enabled: false
},
tooltip: {
enabled: true,
valueDecimals: 2
},
colors: [
"#000000"
],
series: [{
name: 'Inflation',
data: [{
"x": -694310400000.0,
"y": 0.10242085661080069
}, {
"x": -691632000000.0,
"y": 0.09481961147086038
}, {
"x": -689126400000.0,
"y": 0.06818181818181812
}, {
"x": -686448000000.0,
"y": 0.08272727272727276
}, {
"x": -683856000000.0,
"y": 0.09384965831435088
}, {
"x": -681177600000.0,
"y": 0.09375
}, {
"x": -678585600000.0,
"y": 0.09761583445793964
}, {
"x": -675907200000.0,
"y": 0.09062499999999996
}, {
"x": -673228800000.0,
"y": 0.06654991243432562
}, {
"x": -670636800000.0,
"y": 0.061108686163247494
}, {
"x": -667958400000.0,
"y": 0.047701647875108444
}, {
"x": -665366400000.0,
"y": 0.02733874412644166
}, {
"x": -662688000000.0,
"y": 0.013935810810810967
}, {
"x": -660009600000.0,
"y": 0.010139416983523386
}, {
"x": -657590400000.0,
"y": 0.01744680851063829
}, {
"x": -654912000000.0,
"y": 0.004198152812762368
}, {
"x": -652320000000.0,
"y": -0.004164931278633932
}, {
"x": -649641600000.0,
"y": -0.009523809523809379
}, {
"x": -647049600000.0,
"y": -0.02868852459016391
}, {
"x": -644371200000.0,
"y": -0.02988129349160873
}, {
"x": -641692800000.0,
"y": -0.02504105090311981
}, {
"x": -639100800000.0,
"y": -0.026326614561908546
}, {
"x": -636422400000.0,
"y": -0.019039735099337762
}, {
"x": -633830400000.0,
"y": -0.018295218295218296
}, {
"x": -631152000000.0,
"y": -0.02082465639316955
}, {
"x": -628473600000.0,
"y": -0.012547051442910906
}, {
"x": -626054400000.0,
"y": -0.01129234629861986
}, {
"x": -623376000000.0,
"y": -0.011287625418060276
}, {
"x": -620784000000.0,
"y": -0.0058552906733584376
}, {
"x": -618105600000.0,
"y": -0.0016722408026756952
}, {
"x": -615513600000.0,
"y": 0.01561181434599157
}, {
"x": -612835200000.0,
"y": 0.021097046413502074
}, {
"x": -610156800000.0,
"y": 0.024842105263158
}, {
"x": -607564800000.0,
"y": 0.0350654837346851
}, {
"x": -604886400000.0,
"y": 0.03797468354430378
}, {
"x": -602294400000.0,
"y": 0.0580262600592969
}, {
"x": -599616000000.0,
"y": 0.07954062101233506
}, {
"x": -596937600000.0,
"y": 0.09402795425667088
}, {
"x": -594518400000.0,
"y": 0.09475465313028764
}, {
"x": -591840000000.0,
"y": 0.09598308668076116
}, {
"x": -589248000000.0,
"y": 0.09339503575936048
}, {
"x": -586569600000.0,
"y": 0.08584589614740379
}, {
"x": -583977600000.0,
"y": 0.07644370585791438
}, {
"x": -581299200000.0,
"y": 0.06859504132231398
}, {
"x": -578620800000.0,
"y": 0.06943303204601481
}, {
"x": -576028800000.0,
"y": 0.06775510204081625
}, {
"x": -573350400000.0,
"y": 0.06991869918699178
}, {
"x": -570758400000.0,
"y": 0.05964771817453962
}, {
"x": -568080000000.0,
"y": 0.042159180457052914
}, {
"x": -565401600000.0,
"y": 0.02245451025938827
}, {
"x": -562896000000.0,
"y": 0.019706336939721902
}, {
"x": -560217600000.0,
"y": 0.02083333333333326
}, {
"x": -557625600000.0,
"y": 0.018468641785302164
}, {
"x": -554947200000.0,
"y": 0.02313922097956045
}, {
"x": -552355200000.0,
"y": 0.029718255499807
}, {
"x": -549676800000.0,
"y": 0.03209590100541382
}, {
"x": -546998400000.0,
"y": 0.023050326546292688
}, {
"x": -544406400000.0,
"y": 0.020259938837920544
}, {
"x": -541728000000.0,
"y": 0.014057750759878473
}, {
"x": -539136000000.0,
"y": 0.009066868152625585
}, {
"x": -536457600000.0,
"y": 0.007183364839319584
}, {
"x": -533779200000.0,
"y": 0.006815600151457879
}, {
"x": -531360000000.0,
"y": 0.009094353921940135
}, {
"x": -528681600000.0,
"y": 0.008692365835222926
}, {
"x": -526089600000.0,
"y": 0.0086890819795995
}, {
"x": -523411200000.0,
"y": 0.009046362608367886
}, {
"x": -520819200000.0,
"y": 0.004122938530734643
}, {
"x": -518140800000.0,
"y": 0.005994754589734086
}, {
"x": -515462400000.0,
"y": 0.009763424708974844
}, {
"x": -512870400000.0,
"y": 0.009741476208317668
}, {
"x": -510192000000.0,
"y": 0.005994754589734086
}, {
"x": -507600000000.0,
"y": 0.005990265818045737
}, {
"x": -504921600000.0,
"y": 0.011261261261261257
}, {
"x": -502243200000.0,
"y": 0.015043249341857745
}, {
"x": -499824000000.0,
"y": 0.011265490048817162
}, {
"x": -497145600000.0,
"y": 0.006369426751592355
}, {
"x": -494553600000.0,
"y": 0.008614232209737782
}, {
"x": -491875200000.0,
"y": 0.00635039223010847
}, {
"x": -489283200000.0,
"y": 0.0026129152668905586
}, {
"x": -486604800000.0,
"y": 0.0
}, {
"x": -483926400000.0,
"y": -0.002975083674228385
}, {
"x": -481334400000.0,
"y": -0.008534322820037077
}, {
"x": -478656000000.0,
"y": -0.0026070763500931626
}, {
"x": -476064000000.0,
"y": -0.0037216226274656705
}, {
"x": -473385600000.0,
"y": -0.006310319227913919
}, {
"x": -470707200000.0,
"y": -0.006298629121896937
}, {
"x": -468288000000.0,
"y": -0.00519866320089124
}, {
"x": -465609600000.0,
"y": -0.002606105733432673
}, {
"x": -463017600000.0,
"y": -0.005941329372447068
}, {
"x": -460339200000.0,
"y": -0.008537490720118779
}, {
"x": -457747200000.0,
"y": -0.0037230081906179935
}, {
"x": -455068800000.0,
"y": -0.00484171322160154
}, {
"x": -452390400000.0,
"y": 0.0014919806042521522
}, {
"x": -449798400000.0,
"y": 0.0037425149700598404
}, {
"x": -447120000000.0,
"y": 0.0037341299477220424
}, {
"x": -444528000000.0,
"y": 0.0037355248412402897
}, {
"x": -441849600000.0,
"y": 0.002241314904743996
}, {
"x": -439171200000.0,
"y": 0.001491424310216205
}, {
"x": -436665600000.0,
"y": 0.0037327360955581312
}, {
"x": -433987200000.0,
"y": 0.005225830533781339
}, {
"x": -431395200000.0,
"y": 0.009712364587224576
}, {
"x": -428716800000.0,
"y": 0.01647323099962561
}, {
"x": -426124800000.0,
"y": 0.019805680119581393
}, {
"x": -423446400000.0,
"y": 0.02208083832335328
}, {
"x": -420768000000.0,
"y": 0.01862197392923659
}, {
"x": -418176000000.0,
"y": 0.02572706935123037
}, {
"x": -415497600000.0,
"y": 0.0234375
}, {
"x": -412905600000.0,
"y": 0.028284331968738252
}, {
"x": -410227200000.0,
"y": 0.03130823704808061
}, {
"x": -407548800000.0,
"y": 0.034996276991809516
}, {
"x": -405129600000.0,
"y": 0.03607288955001864
}, {
"x": -402451200000.0,
"y": 0.03713330857779429
}, {
"x": -399859200000.0,
"y": 0.03588605253422128
}, {
"x": -397180800000.0,
"y": 0.0353591160220994
}, {
"x": -394588800000.0,
"y": 0.03297911322828884
}, {
"x": -391910400000.0,
"y": 0.03551812522885389
}, {
"x": -389232000000.0,
"y": 0.03546617915904937
}, {
"x": -386640000000.0,
"y": 0.02944383860414379
}, {
"x": -383961600000.0,
"y": 0.03271537622682663
}, {
"x": -381369600000.0,
"y": 0.030401737242128135
}, {
"x": -378691200000.0,
"y": 0.035056017347307566
}, {
"x": -376012800000.0,
"y": 0.03237410071942448
}, {
"x": -373593600000.0,
"y": 0.03625269203158665
}, {
"x": -370915200000.0,
"y": 0.036161833154314316
}, {
"x": -368323200000.0,
"y": 0.033571428571428585
}, {
"x": -365644800000.0,
"y": 0.028459622909996485
}, {
"x": -363052800000.0,
"y": 0.02483150053210359
}, {
"x": -360374400000.0,
"y": 0.023338048090523422
}, {
"x": -357696000000.0,
"y": 0.02083333333333326
}, {
"x": -355104000000.0,
"y": 0.02083333333333326
}, {
"x": -352425600000.0,
"y": 0.019007391763463444
}, {
"x": -349833600000.0,
"y": 0.017562346329469625
}, {
"x": -347155200000.0,
"y": 0.012918994413407825
}, {
"x": -344476800000.0,
"y": 0.010452961672473782
}, {
"x": -342057600000.0,
"y": 0.003463803255975062
}, {
"x": -339379200000.0,
"y": 0.0013821700069107656
}, {
"x": -336787200000.0,
"y": 0.003455425017277136
}, {
"x": -334108800000.0,
"y": 0.006918021445866396
}, {
"x": -331516800000.0,
"y": 0.008999653859466772
}, {
"x": -328838400000.0,
"y": 0.008293020041465038
}, {
"x": -326160000000.0,
"y": 0.011760636457972984
}, {
"x": -323568000000.0,
"y": 0.015219647180906293
}, {
"x": -320889600000.0,
"y": 0.013816925734024155
}, {
"x": -318297600000.0,
"y": 0.015188125647221273
}, {
"x": -315619200000.0,
"y": 0.012409513960703222
}, {
"x": -312940800000.0,
"y": 0.014137931034482687
}, {
"x": -310435200000.0,
"y": 0.015188125647221273
}, {
"x": -307756800000.0,
"y": 0.019323671497584405
}, {
"x": -305164800000.0,
"y": 0.018250688705234275
}, {
"x": -302486400000.0,
"y": 0.017176228100309165
}, {
"x": -299894400000.0,
"y": 0.013722126929674117
}, {
"x": -297216000000.0,
"y": 0.01473612063056895
}, {
"x": -294537600000.0,
"y": 0.012307692307692353
}, {
"x": -291945600000.0,
"y": 0.013628620102214661
}, {
"x": -289267200000.0,
"y": 0.014650766609880739
}, {
"x": -286675200000.0,
"y": 0.013600816048962905
}, {
"x": -283996800000.0,
"y": 0.016002723867892366
}, {
"x": -281318400000.0,
"y": 0.014620877252635056
}, {
"x": -278899200000.0,
"y": 0.014620877252635056
}, {
"x": -276220800000.0,
"y": 0.009140148950575577
}, {
"x": -273628800000.0,
"y": 0.009130875887723988
}, {
"x": -270950400000.0,
"y": 0.0077676460655184965
}, {
"x": -268358400000.0,
"y": 0.012521150592216701
}, {
"x": -265680000000.0,
"y": 0.011144883485309176
}, {
"x": -263001600000.0,
"y": 0.012495778453225359
}, {
"x": -260409600000.0,
"y": 0.007731092436974896
}, {
"x": -257731200000.0,
"y": 0.00671591672263272
}, {
"x": -255139200000.0,
"y": 0.006709158000671067
}, {
"x": -252460800000.0,
"y": 0.006702412868632601
}, {
"x": -249782400000.0,
"y": 0.009048257372654245
}, {
"x": -247363200000.0,
"y": 0.011058981233244003
}, {
"x": -244684800000.0,
"y": 0.013418316001341912
}, {
"x": -242092800000.0,
"y": 0.013404825737265424
}, {
"x": -239414400000.0,
"y": 0.012399463806970434
}, {
"x": -236822400000.0,
"y": 0.010026737967914423
}, {
"x": -234144000000.0,
"y": 0.011356045424181671
}, {
"x": -231465600000.0,
"y": 0.014676450967311627
}, {
"x": -228873600000.0,
"y": 0.013342228152101399
}, {
"x": -226195200000.0,
"y": 0.013342228152101399
}, {
"x": -223603200000.0,
"y": 0.012329223592135952
}, {
"x": -220924800000.0,
"y": 0.013315579227696439
}, {
"x": -218246400000.0,
"y": 0.012288276320159497
}, {
"x": -215827200000.0,
"y": 0.011269472986410234
}, {
"x": -213148800000.0,
"y": 0.00893743793445867
}, {
"x": -210556800000.0,
"y": 0.008928571428571619
}, {
"x": -207878400000.0,
"y": 0.013240648791790655
}, {
"x": -205286400000.0,
"y": 0.015552614162806178
}, {
"x": -202608000000.0,
"y": 0.015521796565389767
}, {
"x": -199929600000.0,
"y": 0.009861932938855844
}, {
"x": -197337600000.0,
"y": 0.012179065174456882
}, {
"x": -194659200000.0,
"y": 0.013166556945358954
}, {
"x": -192067200000.0,
"y": 0.016458196181698526
}, {
"x": -189388800000.0,
"y": 0.016425755584756896
}, {
"x": -186710400000.0,
"y": 0.014107611548556331
}, {
"x": -184204800000.0,
"y": 0.014093739757456536
}, {
"x": -181526400000.0,
"y": 0.015419947506561726
}, {
"x": -178934400000.0,
"y": 0.015404785316289749
}, {
"x": -176256000000.0,
"y": 0.013067624959163693
}, {
"x": -173664000000.0,
"y": 0.010752688172043001
}, {
"x": -170985600000.0,
"y": 0.009756097560975618
}, {
"x": -168307200000.0,
"y": 0.01171875
}, {
"x": -165715200000.0,
"y": 0.012032520325203189
}, {
"x": -163036800000.0,
"y": 0.013970110461338558
}, {
"x": -160444800000.0,
"y": 0.011981865284974136
}, {
"x": -157766400000.0,
"y": 0.01098901098901095
}, {
"x": -155088000000.0,
"y": 0.011970236169524417
}, {
"x": -152668800000.0,
"y": 0.011958629605688387
}, {
"x": -149990400000.0,
"y": 0.013893376413570246
}, {
"x": -147398400000.0,
"y": 0.0161394448030987
}, {
"x": -144720000000.0,
"y": 0.019348597226700903
}, {
"x": -142128000000.0,
"y": 0.01805286911669879
}, {
"x": -139449600000.0,
"y": 0.016103059581320522
}, {
"x": -136771200000.0,
"y": 0.01737451737451745
}, {
"x": -134179200000.0,
"y": 0.017030848329048665
}, {
"x": -131500800000.0,
"y": 0.017302146747837144
}, {
"x": -128908800000.0,
"y": 0.019200000000000106
}, {
"x": -126230400000.0,
"y": 0.019181585677749302
}, {
"x": -123552000000.0,
"y": 0.025575447570332477
}, {
"x": -121132800000.0,
"y": 0.027786649632705274
}, {
"x": -118454400000.0,
"y": 0.028680688336520044
}, {
"x": -115862400000.0,
"y": 0.02763659466327839
}, {
"x": -113184000000.0,
"y": 0.024359379943056148
}, {
"x": -110592000000.0,
"y": 0.02754908169727699
}, {
"x": -107913600000.0,
"y": 0.034865293185419866
}, {
"x": -105235200000.0,
"y": 0.035736875395319334
}, {
"x": -102643200000.0,
"y": 0.03791469194312813
}, {
"x": -99964800000.0,
"y": 0.03559055118110255
}, {
"x": -97372800000.0,
"y": 0.033594976452119285
}, {
"x": -94694400000.0,
"y": 0.0319949811794229
}, {
"x": -92016000000.0,
"y": 0.028678304239401653
}, {
"x": -89596800000.0,
"y": 0.025481665630826544
}, {
"x": -86918400000.0,
"y": 0.025402726146220633
}, {
"x": -84326400000.0,
"y": 0.023183925811437467
}, {
"x": -81648000000.0,
"y": 0.028412600370598895
}, {
"x": -79056000000.0,
"y": 0.029275808936825687
}, {
"x": -76377600000.0,
"y": 0.026033690658499253
}, {
"x": -73699200000.0,
"y": 0.025954198473282508
}, {
"x": -71107200000.0,
"y": 0.025875190258751957
}, {
"x": -68428800000.0,
"y": 0.0310218978102188
}, {
"x": -65836800000.0,
"y": 0.03280680437424044
}, {
"x": -63158400000.0,
"y": 0.03647416413373872
}, {
"x": -60480000000.0,
"y": 0.036363636363636376
}, {
"x": -57974400000.0,
"y": 0.039393939393939315
}, {
"x": -55296000000.0,
"y": 0.0392749244712991
}, {
"x": -52704000000.0,
"y": 0.04229607250755274
}, {
"x": -50025600000.0,
"y": 0.042042042042042205
}, {
"x": -47433600000.0,
"y": 0.04491017964071853
}, {
"x": -44755200000.0,
"y": 0.04477611940298498
}, {
"x": -42076800000.0,
"y": 0.044642857142857206
}, {
"x": -39484800000.0,
"y": 0.047477744807121525
}, {
"x": -36806400000.0,
"y": 0.04424778761061954
}, {
"x": -34214400000.0,
"y": 0.04705882352941182
}, {
"x": -31536000000.0,
"y": 0.04692082111436946
}, {
"x": -28857600000.0,
"y": 0.04678362573099393
}, {
"x": -26438400000.0,
"y": 0.05247813411078739
}, {
"x": -23760000000.0,
"y": 0.05523255813953476
}, {
"x": -21168000000.0,
"y": 0.05507246376811592
}, {
"x": -18489600000.0,
"y": 0.054755043227665556
}, {
"x": -15897600000.0,
"y": 0.054441260744985565
}, {
"x": -13219200000.0,
"y": 0.05428571428571427
}, {
"x": -10540800000.0,
"y": 0.056980056980056926
}, {
"x": -7948800000.0,
"y": 0.056657223796034106
}, {
"x": -5270400000.0,
"y": 0.05932203389830515
}, {
"x": -2678400000.0,
"y": 0.0589887640449438
}, {
"x": 0.0,
"y": 0.06162464985994376
}, {
"x": 2678400000.0,
"y": 0.06424581005586605
}, {
"x": 5097600000.0,
"y": 0.06094182825484751
}, {
"x": 7776000000.0,
"y": 0.060606060606060774
}, {
"x": 10368000000.0,
"y": 0.06043956043956045
}, {
"x": 13046400000.0,
"y": 0.060109289617486183
}, {
"x": 15638400000.0,
"y": 0.057065217391304435
}, {
"x": 18316800000.0,
"y": 0.05691056910569103
}, {
"x": 20995200000.0,
"y": 0.05660377358490565
}, {
"x": 23587200000.0,
"y": 0.05630026809651478
}, {
"x": 26265600000.0,
"y": 0.05600000000000005
}, {
"x": 28857600000.0,
"y": 0.055702917771883076
}, {
"x": 31536000000.0,
"y": 0.05277044854881274
}, {
"x": 34214400000.0,
"y": 0.04724409448818889
}, {
"x": 36633600000.0,
"y": 0.044386422976501416
}, {
"x": 39312000000.0,
"y": 0.04155844155844157
}, {
"x": 41904000000.0,
"y": 0.04404145077720201
}, {
"x": 44582400000.0,
"y": 0.04381443298969079
}, {
"x": 47174400000.0,
"y": 0.04370179948586128
}, {
"x": 49852800000.0,
"y": 0.04358974358974366
}, {
"x": 52531200000.0,
"y": 0.04081632653061207
}, {
"x": 55123200000.0,
"y": 0.038071065989847774
}, {
"x": 57801600000.0,
"y": 0.03535353535353525
}, {
"x": 60393600000.0,
"y": 0.03266331658291466
}]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>