问题描述
我正在尝试使用 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',},});
解决方法
这是迄今为止我能得到的最接近的结果 - 我无法隐藏工具提示，但是，我认为它非常接近您想要的结果。
注意：图表的结果取决于数据，因此，确切的图形线条与图像中的不同；这个 jsfiddle 是一个 您可以用于自定义它的示例。
请参阅此处的 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
* https://stackoverflow.com/a/26530159/12511801
* https://stackoverflow.com/a/20983707/12511801
*
*/
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,plotBands: [
// set the gray plotBand.
{
color: '#D2DAE6',from: Date.UTC(1952,2),// Start of the plot band
to: Date.UTC(1957,4) // End of the plot band
},// set the yellow plotBand.
{
color: '#FDED96',from: Date.UTC(1968,// Start of the plot band
to: Date.UTC(1970,4) // End of the plot band
}
],// Color of the x-axis line:
lineColor: '#000000',// 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,{
"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,{
"x": -355104000000.0,{
"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,{
"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,{
"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,{
"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>