Amcharts：在连续图中放置不带线的点

时间：2017-10-17 22:43:20

标签： javascript amcharts

我正在使用amcharts，我需要在特定日期添加一些点，但不要将它们连接在一起。我试过导游，但我不能。

我的图表有类别字段：日期最大缩放是每小时。

这是my chart，我画了红点给你看。

我希望他们在不同的日期，但身高相同

这是我的代码：

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

1 个答案:

答案 0 :(得分：1)

最好的办法是专门为这些红点创建一个图表。您只需将lineColor设置为子弹的红色，将lineAlpha设置为0，以便不显示这些线条，然后为它们添加数据点。如果您不想要此图表的标记，也可以将visibleInLegend设置为false。

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

演示：

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>

相关问题
最新问题