2017-10-12 86 views
1

我如何在两个日期之间放置虚线?两个日期之间的虚线amcharts

它的图表显示了当天的温度,湿度,风速,但是从现在到今天结束时显示了预测,所以我想 区分它们。

我有一个数据提供商的所有值和日期。

这里是我想要重新创建的示例:示例图表(实际上,这是我的图表,我用photoshop添加虚线以显示您)。

Example

我读了你可以把虚线,但在所有行了,我只是想在一个范围内。

图码

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 
     } 
    }); 

回答

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", 
    }], 
    // ... 
}) 

演示:

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 
 
    } 
 
});
<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>