如何在amcharts烛台图表中设置默认自定义时间范围？

时间：2018-01-09 22:51:19

标签： javascript amcharts

如何在amcharts烛台图表中设置默认的自定义时间范围？我有一个涂有10根蜡烛的烛台图表，我想用动态的时间范围显示图表。例如，如果我的第一根蜡烛在2018-01-01开始，而我的最后一根蜡烛在2018-02-02，我想用2018-10-01开始并在2018-01-20结束的缩放绘制我的图表。我已经尝试过设置默认期限，但它不允许我指定日期 - 只有持续时间，即：2分钟或2天。 这是我的代码：

<script>
   chart = AmCharts.makeChart("chartdiv2", {
        "type": "stock",
        "theme": "light",
        "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
        "marginTop":50,
        "categoryAxesSettings": {
            "minPeriod": "fff"
        },
        "dataSets": [{
            "fieldMappings": [{
                "fromField": "open",
                "toField": "open"
            }, {
                "fromField": "close",
                "toField": "close"
            }, {
                "fromField": "high",
                "toField": "high"
            }, {
                "fromField": "low",
                "toField": "low"
            }, {
                "fromField": "volume",
                "toField": "volume"
            }, {
                "fromField": "value",
                "toField": "value"
            }, {
                "fromField": "buy",
                "toField": "buy"
            }, {
                "fromField": "sell",
                "toField": "sell"
            }],

            "color": "#7f8da9",
            "dataProvider": chartData2,
            "categoryField": "date",

        }

        ],


        "panels": [{
            "title": "Value",
            "showCategoryAxis": true,
            "recalculateToPercents": "never",
            "percentHeight": 70,
            "valueAxes": [{
                "dashLength": 1
            }],

            "categoryAxis": {
                "dashLength": 1,
                "parseDates": true,
                "minPeriod": "ss",
                "gridAlpha": 0,
                "tickLength": 0,
                "axisAlpha": 0,
            },

            "stockGraphs": [{
                "type": "candlestick",
                "id": "g1",
                "openField": "open",
                "closeField": "close",
                "highField": "high",
                "lowField": "low",
                "valueField": "close",
                "lineColor": "#7f8da9",
                "fillColors": "#7f8da9",
                "negativeLineColor": "#db4c3c",
                "negativeFillColors": "#db4c3c",
                "fillAlphas": 1,
                "useDataSetColors": false,
                "comparable": true,
                "compareField": "value",
                "showBalloon": true,
                "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
                "dataDateFormat": "YYYY-MM-DD HH:NN:SS"
            }
            ],

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

        "chartScrollbarSettings": {
            "graph": "g1",
            "graphType": "line",
            "usePeriod": "fff"
        },
        //
        "periodSelector": {
            "position": "top",
            "dateFormat": "YYYY-MM-DD JJ:NN:SS",
            "inputFieldWidth": 150,
            "periods": [{
                "period": "mm",
                "count": 5,
                "label": "5 min"
            }, {
                "period": "mm",
                "count": 10,
                "label": "10 min",
            }, {
                "period": "mm",
                "count": 20,
                "label": "20 minutes"
            }, {
                "period": "mm",
                "count": 30,
                "label": "30 minutes"
            }, {
                "period": "MAX",
                "label": "MAX"
            }]
        }, "export": {
            "enabled": true,
            "position": "top-right"
        }
    });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

1 个答案:

答案 0 :(得分：0)

您可以使用init事件并通过调用股票图表的zoom方法设置默认缩放：

  "listeners": [{
    "event": "init",
    "method": function(e) {
      chart.zoom(new Date(2018, 0, 1), new Date(2018, 0, 20));
    }
  }]

演示如下：

＆＃13;
＆＃13; 
chart = AmCharts.makeChart("chartdiv2", {
  "type": "stock",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
  "marginTop": 50,
  "categoryAxesSettings": {
    "minPeriod": "fff"
  },
  "dataSets": [{
      "fieldMappings": [{
        "fromField": "open",
        "toField": "open"
      }, {
        "fromField": "close",
        "toField": "close"
      }, {
        "fromField": "high",
        "toField": "high"
      }, {
        "fromField": "low",
        "toField": "low"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }, {
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "buy",
        "toField": "buy"
      }, {
        "fromField": "sell",
        "toField": "sell"
      }],

      "color": "#7f8da9",
      "dataProvider": getChartData(),
      "categoryField": "date",

    }

  ],


  "panels": [{
    "title": "Value",
    "showCategoryAxis": true,
    "recalculateToPercents": "never",
    "percentHeight": 70,
    "valueAxes": [{
      "dashLength": 1
    }],

    "categoryAxis": {
      "dashLength": 1,
      "parseDates": true,
      "minPeriod": "ss",
      "gridAlpha": 0,
      "tickLength": 0,
      "axisAlpha": 0,
    },

    "stockGraphs": [{
      "type": "candlestick",
      "id": "g1",
      "openField": "open",
      "closeField": "close",
      "highField": "high",
      "lowField": "low",
      "valueField": "close",
      "lineColor": "#7f8da9",
      "fillColors": "#7f8da9",
      "negativeLineColor": "#db4c3c",
      "negativeFillColors": "#db4c3c",
      "fillAlphas": 1,
      "useDataSetColors": false,
      "comparable": true,
      "compareField": "value",
      "showBalloon": true,
      "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
      "dataDateFormat": "YYYY-MM-DD HH:NN:SS"
    }],

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

  "chartScrollbarSettings": {
    "graph": "g1",
    "graphType": "line",
    "usePeriod": "fff"
  },
  //
  "periodSelector": {
    "position": "top",
    "dateFormat": "YYYY-MM-DD JJ:NN:SS",
    "inputFieldWidth": 150,
    "periods": [{
      "period": "mm",
      "count": 5,
      "label": "5 min"
    }, {
      "period": "mm",
      "count": 10,
      "label": "10 min",
    }, {
      "period": "mm",
      "count": 20,
      "label": "20 minutes"
    }, {
      "period": "mm",
      "count": 30,
      "label": "30 minutes"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  },
  "export": {
    "enabled": true,
    "position": "top-right"
  },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      chart.zoom(new Date(2018, 0, 1), new Date(2018, 0, 20));
    }
  }]
});

function getChartData() {
  return [{
      "value": 15,
      "high": 14,
      "low": 2,
      "date": "2018-01-01 00:00:00",
      "close": 8,
      "open": 8
    },
    {
      "value": 15,
      "high": 22,
      "low": 4,
      "date": "2018-01-02 00:00:00",
      "close": 6,
      "open": 12
    },
    {
      "value": 15,
      "high": 27,
      "low": 10,
      "date": "2018-01-03 00:00:00",
      "close": 11,
      "open": 18
    },
    {
      "value": 15,
      "high": 20,
      "low": 8,
      "date": "2018-01-04 00:00:00",
      "close": 12,
      "open": 13
    },
    {
      "value": 15,
      "high": 19,
      "low": 2,
      "date": "2018-01-05 00:00:00",
      "close": 13,
      "open": 11
    },
    {
      "value": 15,
      "high": 28,
      "low": 12,
      "date": "2018-01-06 00:00:00",
      "close": 21,
      "open": 18
    },
    {
      "value": 15,
      "high": 13,
      "low": -3,
      "date": "2018-01-07 00:00:00",
      "close": 5,
      "open": 6
    },
    {
      "value": 15,
      "high": 15,
      "low": -2,
      "date": "2018-01-08 00:00:00",
      "close": 10,
      "open": 6
    },
    {
      "value": 15,
      "high": 21,
      "low": 5,
      "date": "2018-01-09 00:00:00",
      "close": 10,
      "open": 12
    },
    {
      "value": 15,
      "high": 24,
      "low": 12,
      "date": "2018-01-10 00:00:00",
      "close": 20,
      "open": 17
    },
    {
      "value": 15,
      "high": 18,
      "low": 6,
      "date": "2018-01-11 00:00:00",
      "close": 12,
      "open": 12
    },
    {
      "value": 15,
      "high": 20,
      "low": 5,
      "date": "2018-01-12 00:00:00",
      "close": 20,
      "open": 11
    },
    {
      "value": 15,
      "high": 27,
      "low": 9,
      "date": "2018-01-13 00:00:00",
      "close": 26,
      "open": 17
    },
    {
      "value": 15,
      "high": 33,
      "low": 18,
      "date": "2018-01-14 00:00:00",
      "close": 31,
      "open": 24
    },
    {
      "value": 15,
      "high": 31,
      "low": 17,
      "date": "2018-01-15 00:00:00",
      "close": 20,
      "open": 23
    },
    {
      "value": 15,
      "high": 17,
      "low": 2,
      "date": "2018-01-16 00:00:00",
      "close": 15,
      "open": 8
    },
    {
      "value": 15,
      "high": 20,
      "low": 6,
      "date": "2018-01-17 00:00:00",
      "close": 19,
      "open": 12
    },
    {
      "value": 15,
      "high": 17,
      "low": 1,
      "date": "2018-01-18 00:00:00",
      "close": 1,
      "open": 9
    },
    {
      "value": 15,
      "high": 12,
      "low": -1,
      "date": "2018-01-19 00:00:00",
      "close": 0,
      "open": 7
    },
    {
      "value": 15,
      "high": 21,
      "low": 9,
      "date": "2018-01-20 00:00:00",
      "close": 16,
      "open": 15
    },
    {
      "value": 15,
      "high": 29,
      "low": 12,
      "date": "2018-01-21 00:00:00",
      "close": 15,
      "open": 20
    },
    {
      "value": 15,
      "high": 22,
      "low": 8,
      "date": "2018-01-22 00:00:00",
      "close": 20,
      "open": 15
    },
    {
      "value": 15,
      "high": 15,
      "low": -3,
      "date": "2018-01-23 00:00:00",
      "close": 1,
      "open": 7
    },
    {
      "value": 15,
      "high": 32,
      "low": 16,
      "date": "2018-01-24 00:00:00",
      "close": 24,
      "open": 24
    },
    {
      "value": 15,
      "high": 30,
      "low": 18,
      "date": "2018-01-25 00:00:00",
      "close": 23,
      "open": 24
    },
    {
      "value": 15,
      "high": 11,
      "low": 1,
      "date": "2018-01-26 00:00:00",
      "close": 1,
      "open": 6
    },
    {
      "value": 15,
      "high": 17,
      "low": 1,
      "date": "2018-01-27 00:00:00",
      "close": 8,
      "open": 9
    },
    {
      "value": 15,
      "high": 24,
      "low": 10,
      "date": "2018-01-28 00:00:00",
      "close": 14,
      "open": 17
    },
    {
      "value": 15,
      "high": 11,
      "low": -3,
      "date": "2018-01-29 00:00:00",
      "close": 6,
      "open": 6
    },
    {
      "value": 15,
      "high": 26,
      "low": 10,
      "date": "2018-01-30 00:00:00",
      "close": 17,
      "open": 18
    },
    {
      "value": 15,
      "high": 23,
      "low": 8,
      "date": "2018-01-31 00:00:00",
      "close": 13,
      "open": 16
    },
    {
      "value": 15,
      "high": 19,
      "low": 9,
      "date": "2018-02-01 00:00:00",
      "close": 15,
      "open": 14
    }
  ];
}
＆＃13; 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv2 {
  width: 100%;
  height: 100%;
}
＆＃13; 
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv2"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题