如何自定义开始时间值并向amCharts气球添加一些文本

I am stuck at trying to format values for startTime & endTime fields as time. I want the format to be like 05:00 or 17:10 also to add a custom text on top of every serial.

我坚持尝试将startTime和endTime字段的值格式化为时间。我希望格式如05:00或17:10也在每个序列的顶部添加自定义文本。

Example jsfiddle

var chart = AmCharts.makeChart( "chartdiv", {
  "theme": "light",
  "type": "serial",
  "dataDateFormat": "YYYY-MM-DD",
  "dataProvider": [ {
    "name": "111",
    "startTime": 7.00,
    "endTime": 17.0,
    "value1": "2016-05-03",
    "value2": "2016-05-05",
    "color": "#FF3F33",

  }, {
    "name": "220",
    "startTime": 18.17,
    "endTime": 16.18,
    "value1": "2016-03-15",
    "value2": "2016-03-20",
    "color": "#FFB134",

  }, {
    "name": "109",
    "startTime": 17.0,
    "endTime": 18.40,
    "value1": "2016-01-20",
    "value2": "2016-01-22",
    "color": "#F9FF34",

  }, {
    "name": "108",
    "startTime": 19,
    "endTime": 21,
    "value1": "2016-01-20",
    "value2": "2016-01-21",
    "color": "#36DB44",

  }, {
    "name": "107",
    "startTime": 14.50,
    "endTime": 16.30,
    "value1": "2016-01-20",
    "value2": "2016-01-22",
    "color": "#9DC481",

  }, {
    "name": "106",
    "startTime": 5.50,
    "endTime": 9.15,
    "value1": "2016-02-02",
    "value2": "2016-02-05",
    "color": "#D66C6E",

  }, {
    "name": "105",
    "startTime": 6,
    "endTime": 8,
    "value1": "2016-01-13",
    "value2": "2016-01-21",
    "color": "#0D8ECF",

  }, {
    "name": "104",
    "startTime": 5,
    "endTime": 8,
    "value1": "2016-01-28",
    "value2": "2016-01-31",
    "color": "#FF3F33",

  }, {
    "name": "103",
    "startTime": 5.30,
    "endTime": 7.30,
    "value1": "2016-01-27",
    "value2": "2016-01-31",
    "color": "#FFB134",

  }, {
    "name": "102",
    "startTime": 9,
    "endTime": 11,
    "value1": "2016-01-20",
    "value2": "2016-01-25",
    "color": "#F9FF34",

  }, {
    "name": "101",
    "startTime": 10.0,
    "endTime": 11,
    "value1": "2016-01-22",
    "value2": "2016-01-23",
    "color": "#36DB44",

  } ],
  "valueAxes": [ {
    "axisAlpha": 0,
    "gridAlpha": 0.1
  } ],
  "startDuration": 1,
  "graphs": [ {
    //"valueField": "value",
    "balloonText": "<b>Flight Number [[category]]</b><br>Schedule start date: [[value1]]<br>Schedule end date: [[value2]]<br> Departure Time: [[startTime]]<br> Arrival Time: [[endTime]]",
    "colorField": "color",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "openField": "startTime",
    "type": "column",
    "valueField": "endTime",
  } ],
  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true
  },
  "rotate": true,
  "columnWidth": 1,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "position": "left"
  },
  "export": {
    "enabled": true
  },
  "valueScrollbar": {

  }
} );

I'm trying to learn some customization tricks, if you have any referral link please paste it.

我正在尝试学习一些自定义技巧,如果你有任何推荐链接,请粘贴它。

1 个解决方案

#1

You can use balloonFunction for that. It allows setting a custom function that would format balloon contents according to your logic, including formatting proprietary values as time:

你可以使用balloonFunction。它允许设置一个自定义函数,根据您的逻辑格式化气球内容,包括将专有值格式化为时间:

"graphs": [ {
  //"valueField": "value",
  "balloonFunction": function( item ) {

    function formatTime( val ) {
      var minutes = Math.round( val * 60 );
      var hours = Math.floor( minutes / 60 );
      minutes = minutes - hours * 60;
      var str = String( hours );
      str += ":" + ( minutes > 9 ? minutes : "0" + minutes );
      return str;
    }

    var text = "<b>Flight Number " + item.category + 
               "</b><br>Schedule start date: " + item.dataContext.value1 + 
               "<br>Schedule end date: " + item.dataContext.value1 + 
               "<br> Departure Time: " + formatTime( item.dataContext.startTime ) + 
               "<br> Arrival Time: " + formatTime( item.dataContext.endTime );
    return text;
  },
  "colorField": "color",
  "fillAlphas": 0.8,
  "lineAlpha": 0,
  "openField": "startTime",
  "type": "column",
  "valueField": "endTime",
} ]

To display some custom information directly over the bars, use graph settings labelText and labelPosition. I.e.:

要直接在条形图上显示一些自定义信息,请使用图形设置labelText和labelPosition。即:

"labelText": "[[customText]]",
"labelPosition": "middle"

"[[customText]]" will refer to a field in your data and display it's contents over the bar, if present.

“[[customText]]”将引用数据中的字段,并在条形图上显示其内容(如果存在)。

Here's your fiddle with the above update.

这是你的上述更新的小提琴。

#1