将amCharts股票图表周期选择器转换为下拉列表

Question

我正在使用amCharts股票图表显示一段时间内的交易。我正在使用php和ajax来获取值。

现在，我确实将句点选择器作为按钮，但需要它们作为选择。当用户从下拉列表中选择一个值时，图表缩放应相应地更改。可以这样做吗？

下面是我获取股票图表的代码。请帮忙。

    <div id="chartdiv" style="width:100%; height:400px;"></div>

<select id="mySelect" onchange="test()">
    <option value="5">5
    <option value="15">15
    <option value="30">30
    <option value="60">1H
    <option value="D">1D
</select>

<script type="text/javascript">
  AmCharts.addInitHandler(function (chart) {
  }, ["stock"]);
  var chartData = generateChartData();
  console.log(chartData);


  var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "autoMarginOffset": 30,
    "valueAxesSettings": {
      "position": "right",
      "inside": false,
      "autoMargins": true,
      "axisColor": "#000000",
      "tickLength": 1
    },
    "categoryAxesSettings": {
      "parseDates": true,
      "minPeriod": "ss",
      "axisColor": "#000000",
      "tickLength": 1
    },
    "mouseWheelZoomEnabled": true,
    "dataSets": [{
      "fieldMappings": [{
        "fromField": "open",
        "toField": "open"
      }, {
        "fromField": "close",
        "toField": "close"
      }, {
        "fromField": "high",
        "toField": "high"
      }, {
        "fromField": "low",
        "toField": "low"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],

      "color": "#7f8da9",
      "dataProvider": chartData,
      "title": '<?php echo $symbol; ?>',
      "categoryField": "date"
    }
    ],


    "panels": [{
      "urlTarget": "_blank",
      "showCategoryAxis": true,
      "percentHeight": 70,
      "valueAxes": [{
        "dashLength": 5
      }],

      "categoryAxis": {
        "dashLength": 5
      },

      "stockGraphs": [{
        "id": "g1",
        "type": "candlestick",
        "proCandlesticks": false,
        "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
        "openField": "open",
        "closeField": "close",
        "highField": "high",
        "lowField": "low",
        "lineAlpha": 1,
        "lineColor": "#53b987",
        "fillColors": "#53b987",
        "fillAlphas": 0.9,
        "negativeFillColors": "#eb4d5c",
        "negativeLineColor": "#eb4d5c",
        "useDataSetColors": false,

        "title": "Volume:",
        "valueField": "volume"
      }],

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

    "chartScrollbarSettings": {
      "updateOnReleaseOnly": true,
      "autoGridCount": true,
      "graph": "g1",
      "graphType": "line",
      "scrollbarHeight": 30
    },

    "periodSelector": {
      "position": "top",
      "inputFieldsEnabled": false,
      "periodsText": "",
      "dateFormat": "YYYY-MM-DD JJ:NN",
      "periods": [{
        "period": "hh",
        "count": 1,
        "label": "5",
        "selected": true

      }, {
        "period": "hh",
        "count": 6,
        "label": "15"
      }, {
        "period": "hh",
        "count": 4,
        "label": "30"
      }, {
        "period": "hh",
        "count": 12,
        "label": "1H"
      }, {
        "period": "dd",
        "count": 60,
        "label": "1D"
      }]
    },

    "listeners": [
      {
        "event": "rendered",
        "method": function (e) {

          if (e.chart.ignoreResize) {
            e.chart.ignoreResize = false;
            return;
          }

          // init
          var margins = {
            "left": 0,
            "right": 0
          };

          // iterate thorugh all of the panels
          for (var p = 0; p < chart.panels.length; p++) {
            var panel = chart.panels[p];

            // iterate through all of the axis
            for (var i = 0; i < panel.valueAxes.length; i++) {
              var axis = panel.valueAxes[i];
              if (axis.inside !== false) {
                continue;
              }

              var axisWidth = axis.getBBox().width + 10;
              if (axisWidth > margins[axis.position]) {
                margins[axis.position] = axisWidth;
              }
            }

          }

          // set margins
          if (margins.left || margins.right) {
            chart.panelsSettings.marginLeft = margins.left;
            chart.panelsSettings.marginRight = margins.right;
            e.chart.ignoreResize = true;
            chart.invalidateSize();
          }
        }
      },
      {
        "event": "zoomed",
        "method": function (e) {
          e.chart.lastZoomed = e;
          //console.log(e);
          console.log("ignoring zoomed");
        }
      },

    ]

  });


  setInterval(function () {
    //Setting the new data to the graph
    chart.dataProvider = generateChartData();
    chart.validateData();
  }, 10000);


  function test() {
    var resolution = $("#mySelect").val();
    //console.log(resolution);
    var pp, count;
    if (resolution == "D") {
      resolution = "1D";
      pp = 'dd';
      count = 60;
    }
    else if (resolution == "60") {
      resolution = "1H";
      pp = 'hh';
      count = 12;
    }
    else if (resolution == "30") {
      pp = 'hh';
      count = 4;
    }
    else if (resolution == "15") {
      pp = 'hh';
      count = 6;
    }
    else if (resolution == "5") {
      pp = 'hh';
      count = 1;
    }
    else {
      pp = 'hh';
    }
    //console.log(pp);
    for (var x in chart.periodSelector.periods) {
      var period = chart.periodSelector.periods[x];
      if (pp == period.period && resolution == period.count) {
        period.selected = true;
      }
      else {
        period.selected = false;
      }
    }
   // console.log(period.period);
    chart.periodSelector.setDefaultPeriod();
  }

</script>