2017-10-17 4 views
1

Je travaille avec des amcharts et je dois mettre des points à une date précise sans les joindre. J'ai essayé avec des guides mais je n'ai pas pu.Amcharts: Mettre des points sans ligne dans les graphiques en série

Mon tableau a un champ de catégorie: date max zoom est horaire.

Ceci est my chart avec les points rouges que j'ai dessinés pour vous montrer.

je les veux à une autre date, mais avec la même hauteur

Ceci est mon code:

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, 
      "gridAlpha": 0, 
      "minorGridEnabled": false, 
      "position": "right", 
      "title": "Humedad" 
     },{ 
      "id": "v3", 
      "axisColor": "#969696", 
      "axisThickness": 0, 
      "axisAlpha": 0, 
      "labelsEnabled": false, 
      "offset": 50, 
      "gridAlpha": 0, 
      "minorGridEnabled": false, 
      "position": "left", 
     }], 
     "graphs": [{ 
      "id": "g4", 
      "valueAxis": "v3", 
      //"fillColorsField": "color", 
      "fillColors": "#40f947", 
      "lineColor": "#40f947", 
      "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 
     } 
    }); 

Répondre

1

Votre meilleur pari est de créer un graphique spécifiquement pour les points rouges. Vous devez simplement définir lineColor sur une couleur rouge pour les puces, définissez lineAlpha sur 0 pour que les lignes ne soient pas visibles, puis ajoutez-y des points de données. Vous pouvez également définir visibleInLegend sur false si vous ne voulez pas de marqueur pour ce graphique.

var chartData = [{ 
    "date": "2017-06-05 15:47:00", 
    "hectares": 10, 
    "temperature": 50, 
    "wind": 11, 
    "humidity": 35, 
    "reddot": 50 //data point for red dot graph 
    }, 
    { 
    "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, 
    "reddot": 50 //data point for red dot graph 
    }, 
    // ... etc 
] 



var weatherChart = AmCharts.makeChart("weatherChart", { 
    // ... 
    "graphs": [ 
    // ... other graphs omitted 
    { 
     "id": "g5", 
     "bullet": "round", 
     "valueField": "reddot", 
     "bulletColor": "#800", 
     "lineColor": "#800", 
     "visibleInLegend": false, //optional: hide from legend 
     "lineAlpha": 0 
    } 
    ], 
    // ... 
}); 

Démo:

var chartData = [{ 
 
    "date": "2017-06-05 15:47:00", 
 
    "hectares": 10, 
 
    "temperature": 50, 
 
    "wind": 11, 
 
    "humidity": 35, 
 
    "reddot": 55 
 
    }, 
 
    { 
 
    "date": "2017-06-05 16:47:00", 
 
    "hectares": 12, 
 
    "temperature": 41, 
 
    "wind": 11, 
 
    "humidity": 35, 
 
    "reddot": 55 
 
    }, 
 
    { 
 
    "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, 
 
    "reddot": 55 
 
    }, 
 
    { 
 
    "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, 
 
    "reddot": 55 
 
    }, 
 
    { 
 
    "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, 
 
    "reddot": 55 
 
    } 
 
] 
 

 

 

 
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 
 
    }, { 
 
    "id": "g5", 
 
    "bullet": "round", 
 
    //if this needs to be on a particular value axis, set that here as well 
 
    //"valueAxis": "v2", 
 
    "valueField": "reddot", 
 
    "bulletColor": "#800", 
 
    "lineColor": "#800", 
 
    "visibleInLegend": false, //optional: hide from legend 
 
    "lineAlpha": 0 
 
    }], 
 
    "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>