x 轴上日期的滑块实现在 Highcharts 中无法正常工作
Posted
技术标签:
【中文标题】x 轴上日期的滑块实现在 Highcharts 中无法正常工作【英文标题】：Slider implementation for the dates on the x-axis not working correctly in Highcharts 【发布时间】：2021-09-03 10:32:49 【问题描述】：我需要在我的折线图中添加一个滑块，让用户可以跳转到 x 轴上的特定日期。我已经在图表中添加了一个滑块，但由于某种原因它不能正常工作，我不知道是什么问题。有人可以帮忙吗？
https://jsfiddle.net/samwhite/t5sabeyv/1/
afterSetExtremes: function(e)
$("#slider-range").slider("values", 0, 1975 + e.min);
$("#slider-range").slider("values", 1, 1975 + e.max);
$("#year").val(Math.round(e.min + 1975) +
" - " + Math.round(e.max + 1975));
$("#slider-range").slider(
range: true,
min: 1975,
max: 2020,
values: [1975, 2020],
slide: function(event, ui)
$("#year").val(ui.values[0] + " - " + ui.values[1]);
chart.xAxis[0].setExtremes(ui.values[0] - 1975, ui.values[1] - 1975)
);
$("#year").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
这是我试图实现的相同行为的示例 https://jsfiddle.net/uvat8u05/27/
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：您需要使用Date.UTC 在图表中设置新的间隔。因此，您可以在滑块函数中更新代码，即：
slide: function(event, ui)
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
chart.xAxis[0].setExtremes(Date.UTC(ui.values[0] ,0,1),Date.UTC(ui.values[1] ,0,1) )
然后，你得到错误 chart is not defined 所以我使用 this.axis.chart 访问系列和工具提示。
工作代码：
$(function()
let result =
"data": [
[31536000000.0, 63.4],
[34214400000.0, 63.6],
[36633600000.0, 62.0],
[39312000000.0, 60.8],
[41904000000.0, 60.2],
[44582400000.0, 63.0],
[47174400000.0, 59.6],
[49852800000.0, 51.3],
[52531200000.0, 46.5],
[55123200000.0, 44.4],
[57801600000.0, 43.2],
[60393600000.0, 50.2],
[63072000000.0, 48.9],
[65750400000.0, 48.0],
[68256000000.0, 48.9],
[70934400000.0, 49.9],
[73526400000.0, 51.1],
[76204800000.0, 50.7],
[78796800000.0, 51.7],
[81475200000.0, 51.4],
[84153600000.0, 55.4],
[86745600000.0, 50.7],
[89424000000.0, 52.2],
[92016000000.0, 66.0],
[94694400000.0, 63.2],
[97372800000.0, 64.7],
[99792000000.0, 62.6],
[102470400000.0, 66.0],
[105062400000.0, 81.9],
[128908800000.0, 121.3],
[131328000000.0, 119.9],
[134006400000.0, 105.8],
[136598400000.0, 107.6],
[139276800000.0, 115.0],
[141868800000.0, 126.9],
[144547200000.0, 150.0],
[147225600000.0, 139.3],
[149817600000.0, 150.5],
[152496000000.0, 142.2],
[155088000000.0, 142.8],
[157766400000.0, 132.3],
[160444800000.0, 123.6],
[162864000000.0, 116.4],
[165542400000.0, 113.3],
[233971200000.0, 88.3],
[236563200000.0, 81.6],
[239241600000.0, 73.2],
[241920000000.0, 73.0],
[244512000000.0, 71.8],
[247190400000.0, 84.3],
[249782400000.0, 87.3],
[252460800000.0, 87.3],
[255139200000.0, 87.7],
[257558400000.0, 93.5],
[260236800000.0, 102.0],
[262828800000.0, 100.6],
[265507200000.0, 99.9],
[268099200000.0, 92.7],
[270777600000.0, 88.3],
[273456000000.0, 85.3],
[276048000000.0, 87.5],
[278726400000.0, 90.1],
[281318400000.0, 88.9],
[283996800000.0, 90.1],
[286675200000.0, 92.9],
[289094400000.0, 94.5],
[291772800000.0, 100.2],
[294364800000.0, 104.2],
[297043200000.0, 106.6],
[299635200000.0, 121.3],
[302313600000.0, 113.0],
[304992000000.0, 109.3],
[307584000000.0, 111.4],
[336614400000.0, 138.1],
[339206400000.0, 137.6],
[341884800000.0, 132.8],
[344476800000.0, 136.8],
[347155200000.0, 142.8],
[349833600000.0, 137.9],
[352252800000.0, 136.7],
[354931200000.0, 138.0],
[357523200000.0, 135.9],
[360201600000.0, 136.7],
[362793600000.0, 139.6],
[365472000000.0, 127.0],
[368150400000.0, 110.2],
[370742400000.0, 106.8],
[373420800000.0, 102.2],
[376012800000.0, 96.3],
[378691200000.0, 104.8],
[381369600000.0, 103.9],
[383788800000.0, 104.7],
[386467200000.0, 106.8],
[389059200000.0, 110.2],
[391737600000.0, 108.9],
[394329600000.0, 106.8],
[397008000000.0, 97.2],
[399686400000.0, 83.7],
[402278400000.0, 82.9],
[404956800000.0, 94.1],
[407548800000.0, 95.9],
[410227200000.0, 98.7],
[412905600000.0, 111.7],
[415324800000.0, 115.8],
[418003200000.0, 127.1],
[420595200000.0, 128.6],
[423273600000.0, 130.9],
[425865600000.0, 130.6],
[428544000000.0, 141.8],
[431222400000.0, 141.1],
[578448000000.0, 81.3],
[581126400000.0, 102.4],
[583718400000.0, 115.5],
[586396800000.0, 113.4],
[589075200000.0, 112.8],
[591667200000.0, 114.4],
[594345600000.0, 104.2],
[596937600000.0, 106.4],
[599616000000.0, 113.0],
[602294400000.0, 108.7],
[604713600000.0, 111.6],
[607392000000.0, 106.9],
[609984000000.0, 111.1],
[612662400000.0, 103.1],
[615254400000.0, 102.4],
[617932800000.0, 94.8],
[620611200000.0, 94.7],
[623203200000.0, 91.8],
[625881600000.0, 95.9],
[628473600000.0, 94.2],
[631152000000.0, 93.9],
[633830400000.0, 96.9],
[636249600000.0, 99.2],
[638928000000.0, 108.8],
[641520000000.0, 113.5],
[644198400000.0, 116.4],
[646790400000.0, 112.6],
[649468800000.0, 100.2],
[652147200000.0, 94.9],
[654739200000.0, 90.8],
[873072000000.0, 106.2],
[875664000000.0, 109.5],
[878342400000.0, 106.7],
[880934400000.0, 107.9],
[883612800000.0, 106.3],
[886291200000.0, 106.7],
[888710400000.0, 109.2],
[891388800000.0, 98.4],
[893980800000.0, 96.7],
[896659200000.0, 92.4],
[899251200000.0, 89.8],
[901929600000.0, 80.2],
[904608000000.0, 72.5],
[907200000000.0, 80.5],
[909878400000.0, 84.1],
[912470400000.0, 83.6],
[915148800000.0, 83.7],
[917827200000.0, 84.5],
[920246400000.0, 84.7],
[922924800000.0, 83.2],
[925516800000.0, 85.5],
[928195200000.0, 81.7],
[930787200000.0, 67.3],
[933465600000.0, 79.2],
[936144000000.0, 72.7],
[938736000000.0, 68.7],
[941414400000.0, 74.4],
[944006400000.0, 73.2],
[946684800000.0, 77.1],
[949363200000.0, 82.8],
[951868800000.0, 87.8],
[954547200000.0, 83.6],
[957139200000.0, 87.7],
[959817600000.0, 76.1],
[962409600000.0, 65.3],
[965088000000.0, 61.7],
[967766400000.0, 65.5],
[970358400000.0, 71.9],
[973036800000.0, 78.3],
[975628800000.0, 78.9],
[978307200000.0, 83.8],
[980985600000.0, 77.2],
[983404800000.0, 81.6],
[986083200000.0, 78.6],
[988675200000.0, 74.3],
[991353600000.0, 72.4],
[993945600000.0, 79.2],
[996624000000.0, 83.0],
[999302400000.0, 80.8],
[1001894400000.0, 75.8],
[1004572800000.0, 77.5],
[1422748800000.0, 152.9],
[1425168000000.0, 152.8],
[1427846400000.0, 149.8],
[1430438400000.0, 145.1],
[1433116800000.0, 145.1],
[1435708800000.0, 165.5],
[1438387200000.0, 148.4],
[1441065600000.0, 149.5],
[1443657600000.0, 147.2],
[1446336000000.0, 141.0],
[1448928000000.0, 148.4],
[1451606400000.0, 140.3],
[1454284800000.0, 141.5],
[1456790400000.0, 143.9],
[1459468800000.0, 141.9],
[1462060800000.0, 145.9],
[1464739200000.0, 168.2],
[1467331200000.0, 135.0],
[1470009600000.0, 124.7],
[1472688000000.0, 122.1],
[1475280000000.0, 125.5],
[1477958400000.0, 128.8],
[1480550400000.0, 134.9],
[1483228800000.0, 136.5],
[1485907200000.0, 142.4],
[1488326400000.0, 140.0],
[1491004800000.0, 139.9],
[1493596800000.0, 140.8],
[1496275200000.0, 143.2],
[1498867200000.0, 149.9],
[1501545600000.0, 132.1],
[1504224000000.0, 127.7],
[1506816000000.0, 126.7],
[1509494400000.0, 125.2],
[1512086400000.0, 128.8],
[1514764800000.0, 132.7],
[1517443200000.0, 141.1],
[1519862400000.0, 148.2],
[1522540800000.0, 148.4],
[1525132800000.0, 154.2],
[1527811200000.0, 144.9],
[1530403200000.0, 132.2],
[1533081600000.0, 137.6],
[1535760000000.0, 133.6],
[1538352000000.0, 133.8],
[1541030400000.0, 139.5],
[1543622400000.0, 145.6],
[1546300800000.0, 140.9],
[1548979200000.0, 146.2],
[1551398400000.0, 140.3],
[1554076800000.0, 141.0],
[1593561600000.0, 127.2],
[1596240000000.0, 120.2],
[1598918400000.0, 140.5],
[1601510400000.0, 152.0],
[1604188800000.0, 166.6],
[1606780800000.0, 170.7],
[1609459200000.0, 209.0],
[1612137600000.0, 224.8],
[1614556800000.0, 222.8],
[1617235200000.0, 239.5]
]
;
var $report = $('#report');
var chart = $('#corn_container').highcharts(
chart:
zoomType: 'x'
,
colors: ['#00429d'],
title:
text: "Producer Price Index For Corn Products",
align: 'left',
style:
color: '#2B2B2B',
fontSize: '20px',
fontWeight: 'bold',
,
subtitle:
text: 'Source: U.S. Bureau of Labor Statistics',
style:
color: '#2B2B2B'
,
align: 'left'
,
credits:
enabled: false
,
xAxis:
type: 'datetime',
min: Date.UTC(1970, 1, 1),
max: Date.UTC(2021, 12, 1),
tickInterval: 12 * 30 * 24 * 3600 * 1000 * 5,
labels:
style:
color: '#2B2B2B'
,
plotBands: [
color: '#C7EA46',
from: Date.UTC(2020, 2, 1),
to: Date.UTC(2050, 1, 1)
,
color: '#DEE8E9',
from: Date.UTC(1973, 11, 1),
to: Date.UTC(1975, 2, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
//use it like this ..to access series and chart..
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from November 1973 to February 1975`)
,
mouseout: function(e)
$report.html('')
,
,
color: '#DEE8E9',
from: Date.UTC(1980, 1, 1),
to: Date.UTC(1980, 7, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from January 1980 to July 1980`)
,
mouseout: function(e)
$report.html('')
,
,
color: '#DEE8E9',
from: Date.UTC(1981, 8, 1),
to: Date.UTC(1982, 11, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from August 1981 to November 1982`)
,
mouseout: function(e)
$report.html('')
,
, ,
color: '#DEE8E9',
from: Date.UTC(1990, 7, 1),
to: Date.UTC(1991, 3, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from July 1990 to March 1991`)
,
mouseout: function(e)
$report.html('')
,
,
color: '#DEE8E9',
from: Date.UTC(2001, 4, 1),
to: Date.UTC(2001, 11, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from April 2001 to November 2001`)
,
mouseout: function(e)
$report.html('')
,
,
color: '#DEE8E9',
from: Date.UTC(2007, 12, 1),
to: Date.UTC(2009, 6, 1),
events:
click: function(e)
$report.html(e.type)
,
mouseover: function(e)
this.axis.chart.tooltip.refresh(this.axis.chart.series[1].points[2]);
$report.html(`Recession period from December 2007 to June 2009`)
,
mouseout: function(e)
$report.html('')
,
],
events:
afterSetExtremes: function(e)
//i don't thnk this needed
,
minRange: 1,
tickColor: '#2B2B2B',
lineColor: '#2B2B2B',
lineWidth: 1
,
yAxis: [
title:
text: 'Index 1982=100',
style:
color: '#2B2B2B'
,
min: 40,
max: 320,
tickInterval: 40,
labels:
style:
color: '#2B2B2B'
,
showFirstLabel: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
lineColor: '#2B2B2B',
lineWidth: 1
],
legend:
enabled: false,
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
,
tooltip:
shared: true,
crosshairs: true,
outside: true,
backgroundColor: '#fff',
formatter: function()
var date = new Date(this.x);
var formattedDate = moment(date).format('MMM YYYY');
return '<strong>' + formattedDate + ':</strong> ' + this.y;
,
plotOptions:
series:
cursor: 'pointer',
marker:
lineWidth: 1
,
series: [
name: '',
data: result.data
,
name: "hiddenSeries",
visible: false,
color: '#4572A7',
data: [0, 0, 150, 0, 0, 0, 0, 0],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
]
, function(chart)
$("#slider-range").slider(
range: true,
min: 1975,
max: 2020,
values: [1975, 2020],
slide: function(event, ui)
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
chart.xAxis[0].setExtremes(Date.UTC(ui.values[0], 0, 1), Date.UTC(ui.values[1], 0, 1)) ///use data.utc to set extreme
);
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
);
);<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<div class="charting_div">
<figure class="highcharts-figure">
<div id="corn_container"></div>
<div id="report"></div>
<div style="margin: 20px 0px 0px 60px">
<p>
<label for="amount">Year(s):</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</figure>
</div>【讨论】：
非常感谢斯瓦蒂的帮助。我真的很感激。以上是关于x 轴上日期的滑块实现在 Highcharts 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章