0
私はマイルストーンイベントを表示するために使用される折れ線グラフを持っています。だからxaxisは日付です。データに同じ日付に複数のイベントがある場合は、y値をオフセットしてポイントマーカーを垂直に積み重ねます。同じ日付に複数のマーカーを処理するのが難しくなるため、yのオフセットを大きすぎるようにしたくありません。マーカーにはまた、ホバーがあります。問題は、マーカーの近くにマウスを置くと、1つのマーカーのホバーのみが表示され、1つのマーカーをクリックできることです。同じx値のハイチャート線グラフ、クリックイベントの処理方法
は、ラベル「アップグレード」で、このjsfiddleを参照してください：http://jsfiddle.net/MichaelWitt/adun8km8/1/
あなたがこれをクリックすることはできませんが、ホバリングする青色の三角形を得ることができないとして、あなたがホバー上で動作を確認することができます。
Highcharts.chart('container', {
"title": {
"text": null
},
"credits": {
"enabled": false
},
"chart": {
"zoomType": "x",
"type": "line",
"plotBackgroundImage": null,
"backgroundColor": "transparent",
"height": 330,
"borderWidth": 0,
"top": 0,
"marginTop": 0,
"marginBottom": 150,
"marginLeft": 120
},
"legend": {
"enabled": false,
"align": "left",
"verticalAlign": "top",
"layout": "vertical",
"x": 0,
"y": 0,
"useHTML": false,
"itemMarginTop": 4,
"itemHoverStyle": {
"color": "#3094d1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "normal"
},
"itemStyle": {
"color": "#404b56",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
},
"itemHiddenStyle": {
"color": "#caced1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
}
},
"xAxis": {
"type": "datetime",
"lineWidth": 0,
"lineColor": "#404b56",
"tickColor": "#404b56",
"tickInterval": 173520000,
"gridLineColor": "#222222",
"labels": {
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"format": "{value:%b %d, %Y}"
}
},
"yAxis": {
"labels": {
"enabled": true,
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"y": 3
},
"gridLineColor": "#dddddd",
"tickColor": "#dddddd",
"title": {
"text": null
},
"tickInterval": 1
},
"plotOptions": {
"series": {
"marker": {
"enabled": true,
"radius": 8,
"symbol": "triangle"
},
"cursor": "pointer",
"events": {},
"point": {
"stickyTracking": false
},
"states": {
"hover": {
"enabled": true,
"lineWidth": 0,
"lineWidthPlus": 0
}
}
},
"line": {
"lineWidth": 0,
"stickyTracking": false
}
},
"series": [{
"name": "Upgrade",
"data": [{
"x": 1510203600000,
"y": 0,
"name": "Upgrade",
"key": 158,
"shortDesc": "test",
"status": "Planned",
"marker": {
"symbol": "triangle",
"radius": 7,
"fillColor": "#3498db",
"states": {
"hover": {
"fillColor": "#3498db"
},
"select": {
"fillColor": "#3498db"
}
}
}
}, {
"x": 1510203600000,
"y": 0.25,
"name": "Upgrade",
"key": 159,
"shortDesc": "test",
"status": "Complete",
"marker": {
"symbol": "diamond",
"radius": 7,
"fillColor": "#2ecc71",
"states": {
"hover": {
"fillColor": "#2ecc71"
},
"select": {
"fillColor": "#2ecc71"
}
}
}
}],
"color": "#1abc9c",
"stickyTracking": false
}, {
"name": "Refresh",
"data": [{
"x": 1509336000000,
"y": 1,
"name": "Refresh",
"key": 160,
"shortDesc": "test",
"status": "Late",
"marker": {
"symbol": "square",
"radius": 7,
"fillColor": "#e74c3c",
"states": {
"hover": {
"fillColor": "#e74c3c"
},
"select": {
"fillColor": "#e74c3c"
}
}
}
}],
"color": "#036192",
"stickyTracking": false
}],
"tooltip": {
"followPointer": false,
"followTouchMove": false,
"shared": false,
"backgroundColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[0, "rgba(96, 96, 96, .8)"],
[1, "rgba(16, 16, 16, .8)"]
]
},
"borderWidth": 0,
"style": {
"color": "#FFF"
}
}
}