Question

如何在两个日期之间加点线？

它显示当天的温度，湿度，windSpeed图表，但从现在到当天结束显示预测，所以我想要区分他们。

我有一个包含所有值和日期的数据提供者。

以下是我想要重新创建的示例：示例图表（实际上这是我的图表，我用photoshop添加虚线来向您展示）。

我读到你可以放虚线，但在所有的行中，我只想要在一个范围内。

图表代码

var chartData = generateData();
    var weatherChart = AmCharts.makeChart("weatherChart", {
        "type": "serial",
        "theme": "light",
        "language": "es",
        "marginRight": 80,
        "mouseWheelZoomEnabled": true,
        "zoomOutText": "Mostrar todo",
        "autoMarginOffset": 20,
        "gridAboveGraphs": false,
        "marginTop": 7,
        "dataProvider": chartData,
        "valueAxes": [{
            "id": "v1",
            "axisColor": "#969696",
            "axisAlpha": 1,
            "axisThickness": 2,
            "offset": 10,
            "autoGridCount": true,
            "gridAlpha": 0,
            "minorGridEnabled": false,
            "position": "left",
            "title": "Temperatura y velocidad del viento"
        }, {
            "id": "v2",
            "axisColor": "#969696",
            "axisThickness": 2,
            "axisAlpha": 1,
            "offset": 10,
            "minorGridEnabled": false,
            "position": "right",
            "title": "Humedad"
        },{
            "id": "v3",
            "axisColor": "#969696",
            "axisThickness": 0,
            "axisAlpha": 0,
            "labelsEnabled": false,
            "offset": 50,
            "minorGridEnabled": false,
            "position": "left",
        }],
        "graphs": [{
            "id": "g4",
            "valueAxis": "v3",
            "fillColorsField": "color",
            "balloonText": "[[value]]ha",
            "fillAlphas": .6,
            "lineAlpha": 0.2,
            "type": "column",
            "title": "Hectareas fumigadas",
            "showBalloon": true,
            "valueField": "hectares"
        }, {
            "id": "g1",
            "valueAxis": "v1",
            "balloonText": "[[value]]°",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#ffb014",
            "hideBulletsCount": 50,
            "title": "Temperatura",
            "bulletSize": 5,
            "valueField": "temperature",
            "lineColor": "#ffb014",
            "useLineColorForBulletBorder": true
        }, {
            "id": "g2",
            "valueAxis": "v2",
            "balloonText": "[[value]]%",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#245be5",
            "hideBulletsCount": 50,
            "title": "Humedad",
            "bulletSize": 5,
            "valueField": "humidity",
            "lineColor": "#245be5",
            "useLineColorForBulletBorder": true
        }, {
            "id": "g3",
            "valueAxis": "v1",
            "balloonText": "[[value]]km/h",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#63c2f2",
            "hideBulletsCount": 50,
            "title": "Velocidad del viento",
            "valueField": "wind",
            "bulletSize": 5,
            "lineColor": "#63c2f2",
            "useLineColorForBulletBorder": true
        }],
        "chartScrollbar": {
            "oppositeAxis": false,
            "scrollbarHeight": 30,
            "dragIcon": "dragIconRectBig"
        },
        "chartCursor": {
            "categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
            "pan": true
        },
        "categoryField": "date",
        "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
        "categoryAxis": {
            "minPeriod": "hh",
            "parseDates": true,
            "axisColor": "#DADADA",
            "dashLength": 1,
            "autoGridCount": true,
            "gridAlpha": 0,
            "minorGridEnabled": false
        },
        "legend": {
            "enabled": true,
            "useGraphSettings": false
        },
        "export": {
            "enabled": true
        }
    });

Answer 1

您可以使用dashLengthField图形属性，并在数据点中指定您希望线条（或列）显示破折号的位置。

chartData = [
 // ...
  {
    "date": "2017-06-06 08:47:00",
    "hectares": 10,
    "temperature": 47,
    "wind": 9,
    "humidity": 37,
    "hectares_dash": 5, //start the dash
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 09:47:00",
    "hectares": 10,
    "temperature": 46,
    "wind": 10,
    "humidity": 33,
    "hectares_dash": 0, //reset the dash by setting it to 0
    "temperature_dash": 0,
    "humidity_dash": 0,
    "wind_dash": 0
  },
  // ...
]

AmCharts.makeChart("weatherChart", {
  // ...
  "graphs": [{
     // ...
    "valueField": "hectares",
    "dashLengthField": "hectares_dash",
  }, {
    // ...
    "valueField": "temperature",
    "dashLengthField": "temperature_dash",
  }, {
    // ...
    "valueField": "humidity",
    "dashLengthField": "humidity_dash",
  }, {
    // ...
    "valueField": "wind",
    "dashLengthField": "wind_dash",
  }],
  // ...
})

演示：

＆＃13;

var chartData = [{
    "date": "2017-06-05 15:47:00",
    "hectares": 10,
    "temperature": 50,
    "wind": 11,
    "humidity": 35
  },
  {
    "date": "2017-06-05 16:47:00",
    "hectares": 12,
    "temperature": 41,
    "wind": 11,
    "humidity": 35
  },
  {
    "date": "2017-06-05 17:47:00",
    "hectares": 13,
    "temperature": 47,
    "wind": 12,
    "humidity": 31
  },
  {
    "date": "2017-06-05 18:47:00",
    "hectares": 12,
    "temperature": 44,
    "wind": 8,
    "humidity": 37
  },
  {
    "date": "2017-06-05 19:47:00",
    "hectares": 12,
    "temperature": 43,
    "wind": 12,
    "humidity": 38
  },
  {
    "date": "2017-06-05 20:47:00",
    "hectares": 11,
    "temperature": 48,
    "wind": 9,
    "humidity": 37
  },
  {
    "date": "2017-06-05 21:47:00",
    "hectares": 11,
    "temperature": 40,
    "wind": 12,
    "humidity": 32
  },
  {
    "date": "2017-06-05 22:47:00",
    "hectares": 15,
    "temperature": 44,
    "wind": 8,
    "humidity": 32
  },
  {
    "date": "2017-06-05 23:47:00",
    "hectares": 15,
    "temperature": 44,
    "wind": 9,
    "humidity": 32
  },
  {
    "date": "2017-06-06 00:47:00",
    "hectares": 13,
    "temperature": 50,
    "wind": 10,
    "humidity": 32
  },
  {
    "date": "2017-06-06 01:47:00",
    "hectares": 11,
    "temperature": 41,
    "wind": 12,
    "humidity": 31
  },
  {
    "date": "2017-06-06 02:47:00",
    "hectares": 10,
    "temperature": 48,
    "wind": 12,
    "humidity": 38
  },
  {
    "date": "2017-06-06 03:47:00",
    "hectares": 12,
    "temperature": 46,
    "wind": 12,
    "humidity": 36
  },
  {
    "date": "2017-06-06 04:47:00",
    "hectares": 15,
    "temperature": 48,
    "wind": 11,
    "humidity": 37
  },
  {
    "date": "2017-06-06 05:47:00",
    "hectares": 11,
    "temperature": 47,
    "wind": 9,
    "humidity": 36
  },
  {
    "date": "2017-06-06 06:47:00",
    "hectares": 13,
    "temperature": 40,
    "wind": 9,
    "humidity": 36,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 07:47:00",
    "hectares": 14,
    "temperature": 49,
    "wind": 12,
    "humidity": 32,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 08:47:00",
    "hectares": 10,
    "temperature": 47,
    "wind": 9,
    "humidity": 37,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 09:47:00",
    "hectares": 10,
    "temperature": 46,
    "wind": 10,
    "humidity": 33,
    "hectares_dash": 0, //reset the dash by setting it to 0
    "temperature_dash": 0,
    "humidity_dash": 0,
    "wind_dash": 0
  },
  {
    "date": "2017-06-06 10:47:00",
    "hectares": 13,
    "temperature": 47,
    "wind": 10,
    "humidity": 34
  }
]



var weatherChart = AmCharts.makeChart("weatherChart", {
  "type": "serial",
  "theme": "light",
  "language": "es",
  "marginRight": 80,
  "mouseWheelZoomEnabled": true,
  "zoomOutText": "Mostrar todo",
  "autoMarginOffset": 20,
  "gridAboveGraphs": false,
  "marginTop": 7,
  "dataProvider": chartData,
  "valueAxes": [{
    "id": "v1",
    "axisColor": "#969696",
    "axisAlpha": 1,
    "axisThickness": 2,
    "offset": 10,
    "autoGridCount": true,
    "gridAlpha": 0,
    "minorGridEnabled": false,
    "position": "left",
    "title": "Temperatura y velocidad del viento"
  }, {
    "id": "v2",
    "axisColor": "#969696",
    "axisThickness": 2,
    "axisAlpha": 1,
    "offset": 10,
    "minorGridEnabled": false,
    "position": "right",
    "title": "Humedad"
  }, {
    "id": "v3",
    "axisColor": "#969696",
    "axisThickness": 0,
    "axisAlpha": 0,
    "labelsEnabled": false,
    "offset": 50,
    "minorGridEnabled": false,
    "position": "left",
  }],
  "graphs": [{
    "id": "g4",
    "valueAxis": "v3",
    "fillColorsField": "color",
    "balloonText": "[[value]]ha",
    "fillAlphas": .6,
    "lineAlpha": 0.2,
    "type": "column",
    "title": "Hectareas fumigadas",
    "showBalloon": true,
    "valueField": "hectares",
    "dashLengthField": "hectares_dash",
  }, {
    "id": "g1",
    "valueAxis": "v1",
    "balloonText": "[[value]]°",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#ffb014",
    "hideBulletsCount": 50,
    "title": "Temperatura",
    "bulletSize": 5,
    "valueField": "temperature",
    "dashLengthField": "temperature_dash",
    "lineColor": "#ffb014",
    "useLineColorForBulletBorder": true
  }, {
    "id": "g2",
    "valueAxis": "v2",
    "balloonText": "[[value]]%",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#245be5",
    "hideBulletsCount": 50,
    "title": "Humedad",
    "bulletSize": 5,
    "valueField": "humidity",
    "dashLengthField": "humidity_dash",
    "lineColor": "#245be5",
    "useLineColorForBulletBorder": true
  }, {
    "id": "g3",
    "valueAxis": "v1",
    "balloonText": "[[value]]km/h",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#63c2f2",
    "hideBulletsCount": 50,
    "title": "Velocidad del viento",
    "valueField": "wind",
    "dashLengthField": "wind_dash",
    "bulletSize": 5,
    "lineColor": "#63c2f2",
    "useLineColorForBulletBorder": true
  }],
  "chartScrollbar": {
    "oppositeAxis": false,
    "scrollbarHeight": 30,
    "dragIcon": "dragIconRectBig"
  },
  "chartCursor": {
    "categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
    "pan": true
  },
  "categoryField": "date",
  "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
  "categoryAxis": {
    "minPeriod": "hh",
    "parseDates": true,
    "axisColor": "#DADADA",
    "dashLength": 1,
    "autoGridCount": true,
    "gridAlpha": 0,
    "minorGridEnabled": false
  },
  "legend": {
    "enabled": true,
    "useGraphSettings": false
  },
  "export": {
    "enabled": true
  }
});

＆＃13;

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="weatherChart" style="width: 100%; height: 300px;"></div>

＆＃13;

两个日期之间的虚线

1 个答案: