В тексте всплывающей подсказки Amcharts Candle-Stick отображаются метки времени в неверном формате - PullRequest
Новая
       53

В тексте всплывающей подсказки Amcharts Candle-Stick отображаются метки времени в неверном формате

0 голосов
/ 19 июня 2019

Я использую amcharts для построения диаграммы паттерна Candle-stick. Графики хорошо отрисовываются, но всплывающие подсказки показывают временные метки в другом формате.

enter image description here

enter image description here

На самом деле, значения в формате "ЧЧ: ММ: СС" , но всплывающее окно отображается в другом формате. Где, как он показывает правильно только в «Mid:» (то есть 14: 23: 49 ).

Вот мой код: 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "titles": [{
    "text": "amCharts Box Plot Example",
    "size": 15
  }],
  "graphs": [{
    "type": "candlestick",
    "balloonText": "High: [[high]]\n Open: [[open]]\n Mid: [[mid]]\n Close: [[close]]\nLow: [[low]]",
    "highField": "high",
    "openField": "open",
    "closeField": "close",
    "valueField": "close",
    "lowField": "low",
    "fillColors": "#ffffff",
    "lineColor": "blue",
    "lineAlpha": 1,
    "fillAlphas": 0.9,
    "columnWidth": 0.4
  }, {
    "type": "column",
    "columnWidth": 0.2,
    "valueField": "high",
    "openField": "high",
    "lineColor": "blue",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }, {
    "type": "column",
    "columnWidth": 0.2,
    "valueField": "low",
    "openField": "low",
    "lineColor": "blue",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }, {
    "type": "column",
    "columnWidth": 0.4,
    "valueField": "mid",
    "openField": "mid",
    "lineColor": "orange",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }
"chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "categoryField": "exp",
  "categoryAxis": {
    "title": "Experiment No.",
    "gridPosition": "start",
    "tickPosition": "start",
    "tickLength": 10,
    "axisAlpha": 0.7,
    "gridAlpha": 0
  },

   "dataDateFormat": "HH:NN:SS",
                        //"dataProvider": chartData,
                        "valueAxes": [{
                                "id": "v1",
                                "position": "left",
                                "title": "Time of the Day",
                                "type": "date",
                               // "minimumDate": minDateStr,
                               // "maximumDate": maxDateStr,
                                "markPeriodChange": false,
                                "autoGridCount": false,
                                "gridCount": 7,
                                "minPeriod": "ss",
                            }

                        ],

и ниже - поставщик данных: 

 "dataProvider": [{
    "exp": 1,
    "high": "07:54:00",
    "open": "07:45:00",
    "mid": "05:23:49",
    "close":"04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 2,
    "high": "09:54:00",
    "open": "08:10:00",
    "mid": "05:23:49",
    "close":"04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 3,
   "high": "17:54:00",
    "open": "15:20:00",
    "mid": "14:23:49",
    "close":"12:48:37",
    "low": "11:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 4,
   "high": "11:54:00",
    "open": "08:10:00",
    "mid": "05:23:49",
    "close":"04:48:37",
    "low": "02:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 5,
   "high": "15:54:00",
    "open": "12:50:00",
    "mid": "05:23:49",
    "close":"04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }]

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

1 Ответ

2 голосов
/ 20 июня 2019

Обычно вы устанавливаете dateFormat в вашем графическом объекте в желаемый выходной формат (в данном случае HH:NN:SS), и он будет работать, однако, похоже, он не влияет на значения, отличные от[[open]] и [[value]].В этом случае вы можете использовать balloonFunction и отформатировать их вручную.

Вот базовая демонстрация, которая просто возвращает прямые строковые значения из ваших данных без переформатирования: 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "titles": [{
    "text": "amCharts Box Plot Example",
    "size": 15
  }],
  "graphs": [{
    "type": "candlestick",
    "balloonText": "High: [[high]]\n Open: [[open]]\n Mid: [[mid]]\n Close: [[close]]\nLow: [[low]]",
    "highField": "high",
    "balloonFunction": function(graphDataItem) {
      var dataItem = graphDataItem.dataContext;
      return "High: " + dataItem.high + "<br>Open: " + dataItem.open + "<br>Mid: " + dataItem.mid + "<br>Close: " + dataItem.close + "<br>Low: " + dataItem.low
    },
    //"dateFormat": "HH:NN:SS", //does not work with all fields
    "openField": "open",
    "closeField": "close",
    "valueField": "close",
    "lowField": "low",
    "fillColors": "#ffffff",
    "lineColor": "blue",
    "lineAlpha": 1,
    "fillAlphas": 0.9,
    "columnWidth": 0.4
  }, {
    "type": "column",
    "columnWidth": 0.2,
    "valueField": "high",
    "openField": "high",
    "lineColor": "blue",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }, {
    "type": "column",
    "columnWidth": 0.2,
    "valueField": "low",
    "openField": "low",
    "lineColor": "blue",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }, {
    "type": "column",
    "columnWidth": 0.4,
    "valueField": "mid",
    "openField": "mid",
    "lineColor": "orange",
    "lineThickness": 3,
    "showBalloon": false,
    "clustered": false
  }],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true
  },
  "categoryField": "exp",
  "categoryAxis": {
    "title": "Experiment No.",
    "gridPosition": "start",
    "tickPosition": "start",
    "tickLength": 10,
    "axisAlpha": 0.7,
    "gridAlpha": 0
  },

  "dataDateFormat": "HH:NN:SS",
  "dataProvider": [{
    "exp": 1,
    "high": "07:54:00",
    "open": "07:45:00",
    "mid": "05:23:49",
    "close": "04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 2,
    "high": "09:54:00",
    "open": "08:10:00",
    "mid": "05:23:49",
    "close": "04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 3,
    "high": "17:54:00",
    "open": "15:20:00",
    "mid": "14:23:49",
    "close": "12:48:37",
    "low": "11:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 4,
    "high": "11:54:00",
    "open": "08:10:00",
    "mid": "05:23:49",
    "close": "04:48:37",
    "low": "02:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }, {
    "exp": 5,
    "high": "15:54:00",
    "open": "12:50:00",
    "mid": "05:23:49",
    "close": "04:48:37",
    "low": "03:44:57",
    "interimSLA": "12:30:00",
    "targetedSLA": "08:00:00",
  }],
  "valueAxes": [{
      "id": "v1",
      "position": "left",
      "title": "Time of the Day",
      "type": "date",
      // "minimumDate": minDateStr,
      // "maximumDate": maxDateStr,
      "markPeriodChange": false,
      "autoGridCount": false,
      "gridCount": 7,
      "minPeriod": "ss"
    }

  ],
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}
<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>
<div id="chartdiv"></div>
...