Question

我正在使用amcharts，在值轴上，我以hh：mm的形式配置了持续时间，我需要以相同的格式（即仅小时和分钟）显示表格。

我正在使用类似这样的东西：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,   
  "valueAxes": [{
    "id": "v1",
    "title": "Cost (in USD)",
    "position": "left",
    "autoGridCount": false,
    "labelFunction": function(value) {
      return "$" + Math.round(value);
    }
  }, {
    "id": "v2",
    "title": "Effort ( hh:mm )",
    "gridAlpha": 0,
    "position": "right",
    "autoGridCount": false,
    "duration": "mm",
    "durationUnits": {
      "hh": "h ",
      "mm": "min"
     }
  }],

这是我的 fiddle

只要值低于23:59（即 23:59小时），它就可以正常工作，但是如果值超出此范围，它将开始转换为几天，例如 25 ：07 hrs-显示为“ 1 day，1hr，7min” 。同时，我需要仅以hh：mm格式（即25小时7分钟）显示它。

对于更大的值，我也没有任何问题，例如（386521 hrs，37 mins）。任何避免/限制日期转换的建议将不胜感激！

Answer 1

在这种情况下，您必须使用labelFunction而不是durationUnits，因为无法直接限制durationUnits停在特定单位：

  "valueAxes": [
    // ...first one omitted
  {
    // ...
    "labelFunction": function(value) {
      var minutes = (value % 60).toFixed(0);
      var hours =  Math.floor(value / 60);
      return hours + 'h ' + minutes + ' min';
    }
  }]

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,
  "valueAxes": [{
    "id": "v1",
    "title": "Cost (in USD)",
    "position": "left",
    "autoGridCount": false,
    "labelFunction": function(value) {
      return "$" + Math.round(value);
    }
  }, {
    "id": "v2",
    "title": "Effort ( hh:mm )",
    "gridAlpha": 0,
    "position": "right",
    "autoGridCount": false,
    "labelFunction": function(value) {
      var minutes = (value % 60).toFixed(0);
      var hours = Math.floor(value / 60);
      return hours + 'h ' + minutes + ' min';
    }
  }],
  "graphs": [{
    "id": "g4",
    "valueAxis": "v1",
    "lineColor": "#3B7610",
    "fillColors": "#3B7610",
    "fillAlphas": 1,
    "type": "column",
    "title": "Cost saving per year",
    "valueField": "costSaving",
    "clustered": false,
    "columnWidth": 0.3,
    "topRadius": 0.95,
    // "legendValueText": "$[[value]]M",
    "balloonText": "[[title]]<br /><b style='font-size: 90%'>$[[value]]M</b>"
  }, {
    "id": "g1",
    "valueAxis": "v2",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "lineColor": "#20acd4",
    "type": "smoothedLine",
    "title": "Effort saving per year",
    "topRadius": 0.95,
    "useLineColorForBulletBorder": true,
    "valueField": "effortSaving",
    "balloonText": "[[title]]<br /><b style='font-size: 90%'>[[value]]</b>"
  }],
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "valueLineAlpha": 0.2
  },
  "categoryField": "lob",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0.9,
    "axisThickness": 1,
    "axisColor": "black",
    "gridAlpha": 0,
    "labelRotation": 25,
    "fontSize": 10,
    "boldLabels": true

  },
  "legend": {
    "horizontalGap": 5,
    "maxColumns": 30,
    "useGraphSettings": true,
    "markerSize": 10,
    "leftMargin": 0,
    "valueText": ""
  },
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
    "lob": "abca",
    "effortSaving": 64140,
    "costSaving": 3600
  }, {
    "lob": "dfasdf",
    "effortSaving": 326724,
    "costSaving": 1875
  }, {
    "lob": "dfgsdfgt",
    "effortSaving": 36864,
    "costSaving": 1500,
  }, {
    "lob": "gfsdg",
    "effortSaving": 101808,
    "costSaving": 3614,
  }, {
    "lob": "fgfgf",
    "effortSaving": 13200,
    "costSaving": 6215,
  }, {
    "lob": "jytujty",
    "effortSaving": 111312,
    "costSaving": 3123,
  }, {
    "lob": "erqwr",
    "effortSaving": 5040,
    "costSaving": 1235,
  }]
});

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

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

amcharts以小时和分钟（hh：mm）设置值轴网格，停止将其转换为天数

1 个答案: