javascript - 图表中没有输出，日期范围选择器也没有下拉，无法选择所需的范围。如果我错过了脚本，请提供帮助(No output from my chart and also date range picker drop down not working to select the range I want.Please assist if I missed something in my script)

Question

I have a date range picker and Canvas js,trying to have a script where I select from the various ranges in the date range picker and get output on the chart but, I am only getting output for date range picker with no drop down to select the various ranges.In my stylesheet I have referenced the chart and the date range picker.

(我有一个日期范围选择器和Canvas js，试图有一个脚本，可以从日期范围选择器的各个范围中进行选择，并在图表上获得输出，但是，我只获得日期范围选择器的输出，没有下拉菜单可供选择我在样式表中引用了图表和日期范围选择器。)

I have below in picture format an example of what I want my Output to be like.

(下面我以图片格式提供了一个示例，希望我的输出是什么样子。)

 <script type="text/javascript"> $(function() { var start = moment().subtract(29, 'days'); var end = moment(); function cb(start, end) { $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); } $('#reportrange').daterangepicker({ startDate: start, endDate: end, ranges: { 'Today': [moment(), moment()], 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] } }, cb); cb(start, end); } var dps = []; var chart = new CanvasJS.Chart("chartContainer", { var options = { animationEnabled: true, theme: "light2", title:{ text: "Actual vs Projected Sales" }, axisX:{ valueFormatString: "DD MMM" }, axisY: { title: "Number of Sales", suffix: "K", minimum: 30 }, toolTip:{ shared:true }, legend:{ cursor:"pointer", verticalAlign: "bottom", horizontalAlign: "left", dockInsidePlotArea: true, itemclick: toogleDataSeries }, data: [{ type: "line", showInLegend: true, name: "Projected Sales", markerType: "square", xValueFormatString: "DD MMM, YYYY", color: "#F08080", yValueFormatString: "#,##0K", dataPoints: randomData(new Date(2017, 0, 1), 400) }, { type: "line", showInLegend: true, name: "Actual Sales", lineDashType: "dash", yValueFormatString: "#,##0K", dataPoints: randomData(new Date(2017, 0, 1), 400) }] }; chart.render(); var axisXMin = chart.axisX[0].get("minimum"); var axisXMax = chart.axisX[0].get("maximum"); function randomData(startX, numberOfY){ var xValue, yValue = 0; for (var i = 0; i < 400; i += 1) { xValue = new Date(startX.getTime() + (i * 24 * 60 * 60 * 1000)); yValue += (Math.random() * 10 - 5) << 0; dps.push({ x: xValue, y: yValue }); } return dps; } $( function() { $("#start").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY")); $("#end").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY")); $("#start").datepicker({dateFormat: "d M yy"}); $("#end").datepicker({dateFormat: "d M yy"}); }); $("#reportrange span").change( function() { var minValue = $( "#start" ).val(); var maxValue = $ ( "#end" ).val(); if(new Date(minValue).getTime() < new Date(maxValue).getTime()){ chart.axisX[0].set("minimum", new Date(minValue)); chart.axisX[0].set("maximum", new Date(maxValue)); } }); $(".reportrange").click( function() { var period = this.id; var minValue; minValue = new Date(axisXMax); switch(reportrange){ case "Today": [moment(), moment()]; break; case "Yesterday": [moment().subtract(1, 'days'), moment().subtract(1, 'days')]; break; case "Last 7 days": [moment().subtract(6, 'days'), moment()]; break; case "Last 30 days": [moment().subtract(29, 'days'), moment()]; break; case "This month": 'This Month': [moment().startOf('month'), moment().endOf('month')], break; case "Last month": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] break; default: minValue = axisXMin; } chart.axisX[0].set("minimum", new Date(minValue)); chart.axisX[0].set("maximum", new Date(axisXMax)); }); }); </script> 

 I referenced all the required css 

  <div class="filter"> <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b> </div> </div> <div class="clearfix"></div> </div> <div class="x_content"> <div class="col-md-9 col-sm-12 "> <div id="chartContainer"></div> </div> 

  ask by Tafadzwa Sibanda translate from so

Answer 1

等待大神答复