Question

我是amCharts的新手来创建ganttCharts和其他人。我正在尝试创建甘特图并为每列设置一些时间值。所以我可以创建这些行;

{
        "category": "Planned", 

        "segments": [   {
         "start": 8,
            "duration": 9,           
            "color": "#46615e",
             "task": "Order"
        } ,{
         "start": 18,
            "duration": 1,           
            "color": "#46615e",
             "task": "Order"
        } ,{
         "start": 20,
            "duration": 1,           
            "color": "#46615e",
             "task": "Order"
        } 
 ]
    }

但是对于起始值，而不是8,18,20，我想写08：18,18：22,20：25等等。

但它不适用于这些价值观..你有什么想法吗？我将在下面分享所有代码。

   <!-- Styles -->
    <style>
    #chartdiv {
      width: 100%;
      height: 500px;
    }                                                                   
    </style>

    <!-- Resources -->

<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/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.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" />

    <!-- Chart code -->
    <script>
    var chart = AmCharts.makeChart( "chartdiv", {
        "type": "gantt",
        "theme": "dark",
        "marginRight": 70,
        "period": "hh",
        "dataDateFormat":"YYYY-MM-DD hh:nn",
        "balloonDateFormat": "JJ:NN",

        "columnWidth": 0.5,
        "valueAxis": {
            "type": "date",
             "parseDates": true,
              "minPeriod": "mm"
        },
        "brightnessStep":  0,
        "graph": {
            "fillAlphas": 0.5,  
            "balloonText": "<span style='font-size:11px'>[[category]] -> [[task]]</span>",
            "labelText": "[[task]]",
            "labelPosition": "left",
             "labelOffset": 0,
        },
        "rotate": true,
        "categoryField": "category",
        "segmentsField": "segments",
        "colorField": "color",
        "startDate": "2018-10-02 00:00", 
        "startField": "start",
        "endField": "end",
        "durationField": "duration",
        "dataProvider": [ {
            "category": "",
            "segments": [   {
             "start": 7,
                "duration": 17,           
                "color": "#fff" 
            }  ]
        }, {
            "category": "Column A", 

            "segments": [   {
             "start": 8,
                "duration": 9,           
                "color": "#46615e",
                 "task": "Order"
            } ,{
             "start": 19,
                "duration": 1,           
                "color": "#46615e",
                 "task": "Order"
            } ,{
             "start": 21,
                "duration": 1,           
                "color": "#46615e",
                 "task": "Order"
            } 
     ]
        },  {
            "category": "Column B",
            "segments": [ {
                "start": 8,
                "duration": 8,
                "color": "#8dc49f",
                "task": "Order"
            }, {
                "start": 17,
                "duration": 2,
                "color": "#8dc49f",
                 "task": "Order"
            }, {
                "start": 20,
                "duration": 2,
                "color": "lightblue",
                "task": "Order"
            } ]
        }],
        "chartCursor": {
            "cursorColor":"#55bb76",
            "valueBalloonsEnabled": false,
            "cursorAlpha": 0,
            "valueLineAlpha":0.5,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "zoomable":false,
            "valueZoomable":true
        } 
    } );
    </script>

    <!-- HTML -->
    <div id="chartdiv"></div>

Answer 1

startField和endField映射的值只接受数值。如果要设置时间，则必须通过startDateField和endDateField使用日期。

  "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
     // ...
    "segments": [ {
      "start": "2016-01-01 08:18",
      "end": "2016-01-11 18:18",

检查this example。虽然它只使用日期，但您可以提供与dataDateFormat匹配的日期时间。

amCharts日期时间值问题，无法设置hh：mm时间

1 个答案: