我正在开发一个Web应用程序,我使用Highcharts.js作为图表库。在Highcharts中的折线图中,您可以在图表中悬停某个点时获得工具提示。您还可以在同一点获得十字准线(垂直线)。
我想要的是一种始终显示十字准线并且用户可以水平拖动的方法。应显示十字准线所在点的工具提示。这使得用户可以“保存”#34;图表中的位置,以便当用户不再悬停图表时它不会消失。工具提示应仅显示十字准线的位置,如果用户悬停在图形的其他区域,则不显示。
有人知道在Highcharts中这是否可行?
答案 0 :(得分:0)
您可以使用the draggable points plugin并创建a custom symbol for a bubble marker。
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.crosshair = function (x,y,w,h,elem) {
var ret = [],
chart;
if (elem.element) {
chart = elem.element.farthestViewportElement.parentElement.id.split('-');
chart = Highcharts.charts[chart[chart.length - 1]];
ret = [
'M', x, 0,
'L', x, chart.plotHeight
];
}
return ret;
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.crosshair = Highcharts.SVGRenderer.prototype.symbols.crosshair;
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
title: {
text: 'Highcharts draggable points demo'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stickyTracking: false
},
line: {
cursor: 'ns-resize'
},
bubble: {
cursor: 'move'
}
},
tooltip: {
formatter: function() {
if (this.point.series.userOptions.noTooltip) return false;
var tooltip = this.series.chart.tooltip;
return tooltip.defaultFormatter.call(this, tooltip);
}
},
series: [ {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
type: 'column',
minPointLength: 2
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
draggableY: true
}, {
noTooltip: true,
data: [[10,10,10]],
draggableX: true,
dragMinX: 0,
dragMaxX: 11,
maxSize: 1,
minSize: 1,
type: 'bubble',
marker: {
symbol: 'crosshair',
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
},
minPointLength: 2,
showInLegend: false
}]
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>