JavaScript amcharts Yaxis最小值应设置为“ 00:00”

时间：2018-09-08 12:42:13

标签： javascript charts amcharts

我正在尝试将AmCharts中的时间轴（Yaxis / ValueAxis）设置为最小值“ 00:00”。

以下代码：

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "color": "black",
  "dataDateFormat": "HH:NN:SS",
  "dataProvider": [{
      "businessDate": "01/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "02/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "03/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "06/08/18",
      "duration": 657,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "07/08/18",
      "duration": 578,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "08/08/18",
      "duration": 694,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "09/08/18",
      "duration": 512,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "10/08/18",
      "duration": 672,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "13/08/18",
      "duration": 483,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "14/08/18",
      "duration": 663,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "15/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "16/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "17/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "20/08/18",
      "duration": 637,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "21/08/18",
      "duration": 624,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "22/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "23/08/18",
      "duration": 666,
      "reportPrintTime": "06:55:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "24/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "27/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "28/08/18",
      "duration": 563,
      "reportPrintTime": "05:12:00",
      "sla": "06:30:00",
    }
  ],
  "valueAxes": [{
      "id": "v1",
      "position": "left",
      "title": "Time of the Day",
      "type": "date",
      "period": "a",
      "minimum":"00:00",
      "minPeriod": "ss",
    }, {
      "id": "v2",
      "unitPosition": "left",
      "position": "right",
      "title": "Duration of the Execution",

      "duration": "mm",
      "durationUnits": {
        "hh": "h ",
        "mm": "min"
      }

    }

  ],
  "startDuration": 1,
  "graphs": [{
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "duration",
      "valueAxis": "v2",
      "fillColor": "#e8e8e3",
      "balloonText": "Duration : [[value]]",
      "balloon": {
        "adjustBorderColor": true,
        "color": "black",
        "cornerRadius": 5,
        "fillColor": "#FFFFFF"
      }
    }, {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "bullet": "round",
      "lineColor": "blue",
      "bulletBorderColor": "blue",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "reportPrintTime",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "Report Print Time : <b>[[value]]</b>"
    },
    {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "lineColor": "red",
      "bullet": "square",
      "bulletBorderColor": "red",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "sla",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "SLA : <b>[[value]]</b>"
    }
  ],
  "chartCursor": {
    "categoryBalloonDateFormat": "DD",
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
    "fullWidth": true,
    "valueBalloonsEnabled": true,
    "zoomable": false
  },
  "categoryField": "businessDate",
  "categoryAxis": {
    "gridPosition": "start",
    "autoGridCount": false,
    "gridCount": 1000,
    "title": "Business Dates (in 'dd/mm/yy' format)",
    "labelRotation": 75
  }
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>

要求是：

（a）蓝线（报告打印时间）被横轴弄乱了

（b）红线（SLA）也被绘制在图表的顶部，应该有一些边距-图表应该精确地绘制在中心。

我正在尝试将值轴的'minimum'属性设置为“ 00:00”，但是它没有用。任何建议将不胜感激！

1 个答案:

答案 0 :(得分：0)

由于使用的是基于日期的值轴，因此需要使用minimumDate。最长日期是通过maximumDate设置的，如果您想调整红线的位置使其更多地落在中间，则需要使用该日期。如果您想强制显示“ 00:00”，则还希望将markPeriodChange设置为false，因为假定仅时间日期设置为1月1日。

下面的更新代码：

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "color": "black",
  "dataDateFormat": "HH:NN:SS",
  "dataProvider": [{
      "businessDate": "01/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "02/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "03/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "06/08/18",
      "duration": 657,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "07/08/18",
      "duration": 578,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "08/08/18",
      "duration": 694,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "09/08/18",
      "duration": 512,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "10/08/18",
      "duration": 672,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "13/08/18",
      "duration": 483,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "14/08/18",
      "duration": 663,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "15/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "16/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "17/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "20/08/18",
      "duration": 637,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    },
    {
      "businessDate": "21/08/18",
      "duration": 624,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "22/08/18",
      "duration": 506,
      "reportPrintTime": "04:15:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "23/08/18",
      "duration": 666,
      "reportPrintTime": "06:55:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "24/08/18",
      "duration": 552,
      "reportPrintTime": "05:01:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "27/08/18",
      "duration": 531,
      "reportPrintTime": "04:40:00",
      "sla": "06:30:00",
    }, {
      "businessDate": "28/08/18",
      "duration": 563,
      "reportPrintTime": "05:12:00",
      "sla": "06:30:00",
    }
  ],
  "valueAxes": [{
      "id": "v1",
      "position": "left",
      "title": "Time of the Day",
      "type": "date",
      //"period": "a", //not valid
      "minimumDate": "00:00",
      "maximumDate": "12:30",      //set/adjust if needed.
      "markPeriodChange": false,
      "minPeriod": "ss",
    }, {
      "id": "v2",
      "unitPosition": "left",
      "position": "right",
      "title": "Duration of the Execution",
      "duration": "mm",
      "durationUnits": {
        "hh": "h ",
        "mm": "min"
      }

    }

  ],
  "startDuration": 1,
  "graphs": [{
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "duration",
      "valueAxis": "v2",
      "fillColor": "#e8e8e3",
      "balloonText": "Duration : [[value]]",
      "balloon": {
        "adjustBorderColor": true,
        "color": "black",
        "cornerRadius": 5,
        "fillColor": "#FFFFFF"
      }
    }, {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "bullet": "round",
      "lineColor": "blue",
      "bulletBorderColor": "blue",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "reportPrintTime",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "Report Print Time : <b>[[value]]</b>"
    },
    {
      "lineAlpha": 0.9,
      "type": "line",
      "lineThickness": 1.5,
      "lineColor": "red",
      "bullet": "square",
      "bulletBorderColor": "red",
      "bulletBorderThickness": 0.2,
      "bulletBorderAlpha": 0.5,
      "valueField": "sla",
      "dateFormat": "HH:NN:SS",
      "valueAxis": "v1",
      "balloonText": "SLA : <b>[[value]]</b>"
    }
  ],
  "chartCursor": {
    "categoryBalloonDateFormat": "DD",
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
    "fullWidth": true,
    "valueBalloonsEnabled": true,
    "zoomable": false
  },
  "categoryField": "businessDate",
  "categoryAxis": {
    "gridPosition": "start",
    "autoGridCount": false,
    "gridCount": 1000,
    "title": "Business Dates (in 'dd/mm/yy' format)",
    "labelRotation": 75
  }
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>

相关问题
最新问题