问题描述
我需要在折线图中添加一个滑块，允许用户跳转到 x 轴上的特定日期。我已经在图表中添加了一个滑块，但由于某种原因它无法正常工作，我无法弄清楚是什么问题。有人可以帮忙吗？
https://jsfiddle.net/samwhite/t5sabeyv/1/
afterSetExtremes: function(e) {
$("#slider-range").slider("values",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/
如有任何帮助，我们将不胜感激。
解决方法
您需要使用 Date.UTC 在图表内设置新的间隔。因此，您可以更新滑块函数内的代码，即：
slide: function(event,ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
chart.xAxis[0].setExtremes(Date.UTC(ui.values[0],1),Date.UTC(ui.values[1],1) )
}
然后，您遇到错误图表未定义，所以我使用 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,[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,[89424000000.0,52.2],[92016000000.0,66.0],[94694400000.0,63.2],[97372800000.0,64.7],[99792000000.0,62.6],[102470400000.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,[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,[273456000000.0,85.3],[276048000000.0,87.5],[278726400000.0,90.1],[281318400000.0,88.9],[283996800000.0,[286675200000.0,92.9],[289094400000.0,94.5],[291772800000.0,100.2],[294364800000.0,104.2],[297043200000.0,106.6],[299635200000.0,[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,[349833600000.0,137.9],[352252800000.0,136.7],[354931200000.0,138.0],[357523200000.0,135.9],[360201600000.0,[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,[389059200000.0,[391737600000.0,108.9],[394329600000.0,[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,[596937600000.0,106.4],[599616000000.0,[602294400000.0,108.7],[604713600000.0,111.6],[607392000000.0,106.9],[609984000000.0,111.1],[612662400000.0,103.1],[615254400000.0,[617932800000.0,94.8],[620611200000.0,94.7],[623203200000.0,91.8],[625881600000.0,[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,[646790400000.0,112.6],[649468800000.0,[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,[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,[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,[946684800000.0,77.1],[949363200000.0,82.8],[951868800000.0,87.8],[954547200000.0,[957139200000.0,[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,[986083200000.0,78.6],[988675200000.0,74.3],[991353600000.0,72.4],[993945600000.0,[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,[1435708800000.0,165.5],[1438387200000.0,148.4],[1441065600000.0,149.5],[1443657600000.0,147.2],[1446336000000.0,141.0],[1448928000000.0,[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,[1514764800000.0,132.7],[1517443200000.0,[1519862400000.0,148.2],[1522540800000.0,[1525132800000.0,154.2],[1527811200000.0,144.9],[1530403200000.0,132.2],[1533081600000.0,[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,[1554076800000.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,max: Date.UTC(2021,12,tickInterval: 12 * 30 * 24 * 3600 * 1000 * 5,labels: {
style: {
color: '#2B2B2B'
}
},plotBands: [{
color: '#C7EA46',from: Date.UTC(2020,2,to: Date.UTC(2050,1)
},{
color: '#DEE8E9',from: Date.UTC(1973,11,to: Date.UTC(1975,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('')
}
},},from: Date.UTC(1980,to: Date.UTC(1980,7,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`)
},from: Date.UTC(1981,8,to: Date.UTC(1982,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`)
},from: Date.UTC(1990,to: Date.UTC(1991,3,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`)
},from: Date.UTC(2001,4,to: Date.UTC(2001,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`)
},from: Date.UTC(2007,to: Date.UTC(2009,6,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`)
},}
],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,showFirstLabel: true,gridLineWidth: 0,minorGridLineWidth: 0,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,150,0],pointStart: Date.UTC(2010,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],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>