时间戳

首页 > 解决方案 > amcharts 以小时和分钟 (hh:mm) 为单位设置值轴网格，停止它以转换为天

javascript - amcharts 以小时和分钟 (hh:mm) 为单位设置值轴网格，停止它以转换为天

问题描述

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

这是我的小提琴

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

对于更大的值，我也没有任何问题将其显示为（386521 小时，37 分钟）。任何避免/限制日转换的建议将不胜感激！

标签： javascriptchartsamcharts

解决方案

在这种情况下，您必须使用 alabelFunction而不是，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>

推荐阅读