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

How to customize start time value and add some text to amCharts balloons

本文关键字：气球 amCharts 添加文本自定义开始开始时时间更新时间：2023-09-26

我坚持尝试将startTime和endTime字段的值格式化为时间。我希望格式像 05：00 或 17：10 一样，以便在每个连续剧的顶部添加自定义文本。

例子 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": {
  }
} );

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

你可以

使用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",
} ]

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

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

"[[自定义文本]]"将引用数据中的字段，并在条形图上显示其内容（如果存在）。

这是您对上述更新的小提琴。