javascript - X 軸に日付のないローソク足チャート

Question

x 軸に日時なしで amcharts のローソク足チャートを使用したい。

日付の代わりに数字を使いたい。

例: http://www.amcharts.com/demos/candlestick-chart/

それは可能ですか？

Answer 1

ローソク足チャートでは、必ずしも日付ベースの項目軸を使用する必要はありません。そのためには、設定"parseDates": trueから を削除するだけcategoryAxisです。

これが完了すると、グラフはカテゴリ軸を日付スケールと見なさず、任意の文字列または数値をカテゴリとして使用できるようになります。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "graphs": [ {
    "id": "g1",
    "closeField": "close",
    "fillColors": "#7f8da9",
    "highField": "high",
    "lineColor": "#7f8da9",
    "lineAlpha": 1,
    "lowField": "low",
    "fillAlphas": 0.9,
    "negativeFillColors": "#db4c3c",
    "negativeLineColor": "#db4c3c",
    "openField": "open",
    "title": "Price:",
    "type": "candlestick",
    "valueField": "close"
  } ],
  "chartScrollbar": {
    "graph": "g1",
    "graphType": "line",
    "scrollbarHeight": 30
  },
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "categoryField": "date",
  "dataProvider": [ {
    "date": "1",
    "open": "136.65",
    "high": "136.96",
    "low": "134.15",
    "close": "136.49"
  }, {
    "date": "2",
    "open": "135.26",
    "high": "135.95",
    "low": "131.50",
    "close": "131.85"
  }, {
    "date": "3",
    "open": "132.90",
    "high": "135.27",
    "low": "128.30",
    "close": "135.25"
  }, {
    "date": "4",
    "open": "134.94",
    "high": "137.24",
    "low": "132.63",
    "close": "135.03"
  }, {
    "date": "5",
    "open": "136.76",
    "high": "136.86",
    "low": "132.00",
    "close": "134.01"
  }, {
    "date": "6",
    "open": "131.11",
    "high": "133.00",
    "low": "125.09",
    "close": "126.39"
  }, {
    "date": "7",
    "open": "123.12",
    "high": "127.75",
    "low": "120.30",
    "close": "125.00"
  }, {
    "date": "8",
    "open": "128.32",
    "high": "129.35",
    "low": "126.50",
    "close": "127.79"
  }, {
    "date": "9",
    "open": "128.29",
    "high": "128.30",
    "low": "123.71",
    "close": "124.03"
  }, {
    "date": "10",
    "open": "122.74",
    "high": "124.86",
    "low": "119.65",
    "close": "119.90"
  } ]
} );

#chartdiv {
  width: 100%;
  height: 250px;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>