Datepicker не устанавливает максимальное и минимальное значение - PullRequest
Новая
       15

Datepicker не устанавливает максимальное и минимальное значение

2 голосов
/ 18 апреля 2019

Я устанавливаю свое минимальное и максимальное значение, используя образцы данных в моей функции push, чтобы показать их в палитре дат.Но когда я нажимаю на кнопку выбора даты, она показывает неправильное минимальное и максимальное значение, что не так с моим кодом?Я использовал это, чтобы получить минимальное и максимальное значение

"minDate": dataProvider [0] .date, "maxDate": dataProvider [dataProvider.length - 1] .date, 

var chartData1 = [];


generateChartData();

function generateChartData() {
    chartData1.push(
    {
        "date": "2012-10-11",
        "value": 33
    }, {
        "date": "2012-12-12",
        "value": 50
    }, {
        "date": "2012-12-13",
        "value": 10
    }, {
        "date": "2012-12-14",
        "value": 100
    }, {
        "date": "2013-12-15",
        "value": 30
    });
    
  
}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
      "title": "first data set",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData1,
      "categoryField": "date"
    }],

  "panels": [{

      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
      }],

      "stockLegend": {
        "periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]"
      }
    },

    {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [{
        "valueField": "volume",
        "type": "column",
        "showBalloon": false,
        "fillAlphas": 1
      }],

      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]"
      }
    }
  ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    fullWidth: true,
    cursorAlpha: 0.1
  },

  "periodSelector": {
    "position": "left",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },

  "dataSetSelector": {
    "position": "left"
  }
});

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": dataProvider[0].date,
    "maxDate": dataProvider[dataProvider.length - 1].date,
    "onClose": function() {
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
    }
  });
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: Verdana;
}

#chartdiv {
	width: 100%;
	height: 100%;
}
<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

1 Ответ

1 голос
/ 18 апреля 2019

Из документации minDate и maxDate :

minDate

Поддерживается несколько типов:

  • Объект даты, содержащий минимальную дату.

  • Строка в формате, определенном параметром dateFormat , илиотносительная дата.

Ваши даты в формате yyyy-mm-dd, но ваш вариант dateFormat составляет dd-mm-yy.

.в документации упоминается, что они могут быть объектами даты.Вы можете преобразовать ваши строки в объекты даты, обернув их в new Date(...). 

"minDate": new Date(dataProvider[0].date),
"maxDate": new Date(dataProvider[dataProvider.length - 1].date),


var chartData1 = [];


generateChartData();

function generateChartData() {
  chartData1.push({
    "date": "2012-10-11",
    "value": 33
  }, {
    "date": "2012-12-12",
    "value": 50
  }, {
    "date": "2012-12-13",
    "value": 10
  }, {
    "date": "2012-12-14",
    "value": 100
  }, {
    "date": "2013-12-15",
    "value": 30
  });


}

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "extendToFullPeriod": false,

  "dataSets": [{
    "title": "first data set",
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }, {
      "fromField": "volume",
      "toField": "volume"
    }],
    "dataProvider": chartData1,
    "categoryField": "date"
  }],

  "panels": [{

      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [{
        "id": "g1",

        "valueField": "value",
        "comparable": true,
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
      }],

      "stockLegend": {
        "periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]"
      }
    },

    {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [{
        "valueField": "volume",
        "type": "column",
        "showBalloon": false,
        "fillAlphas": 1
      }],

      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]"
      }
    }
  ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    fullWidth: true,
    cursorAlpha: 0.1
  },

  "periodSelector": {
    "position": "left",
    "periods": [{
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },

  "dataSetSelector": {
    "position": "left"
  }
});

chart.addListener('rendered', function(event) {
  var dataProvider = chart.dataSets[0].dataProvider;
  $(".amChartsPeriodSelector .amChartsInputField").datepicker({
    "dateFormat": "dd-mm-yy",
    "minDate": new Date(dataProvider[0].date),
    "maxDate": new Date(dataProvider[dataProvider.length - 1].date),
    "onClose": function() {
      $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
    }
  });
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: Verdana;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<!-- jQuery stuff -->
<link rel="stylesheet" media="all" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<!-- amCharts -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
...