gpt4 book ai didi

javascript - Highcharts 中样条图中的标记/圆圈

转载 作者:行者123 更新时间:2023-11-29 21:26:25 28 4
gpt4 key购买 nike

我有一个场景,我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表,图表的代码如下。

我的输出应该如下所示。我已经在图像中标记了预期的圆圈: OutPut Image

    $(function () {
var image;
var line,
label,
image,
clickX,
clickY;

var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});

clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}

var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
if (image) {
image.translate(e.pageX - clickX, e.pageY - clickY)
}
if (label) {
label.translate(e.pageX - clickX, e.pageY - clickY)
}
}

var stop = function () {
$(document).unbind('.line');
}

$('#ao-salesoptimization-graph').highcharts({
chart: {
type: 'spline',
spacingBottom:40,
spacingTop: 5,
spacingLeft: 0,
spacingRight: 10,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineColor: '#eeeeee',
gridLineWidth: 1,
type: 'datetime',
min: Date.UTC(2010, 0, 1),
max: Date.UTC(2020, 0, 1),
labels: {
enabled :false
},
plotLines: [{
color: '#004a80',
dashStyle: 'Dot',
value: Date.UTC(2014, 7, 10), // Value of where the line will appear
width: 5,// Width of the line
zIndex: "10",
label: {
text: '<span class="drag"></span>',
}
}],
tickWidth: 0
},
plotOptions: {

series: {
lineWidth: 4,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: "#4b0081",
states: {
hover: {
enabled: true,
fillColor: "#0047ab",
lineColor: "#fff",
lineWidth: 3,

}
},


}
}
},
yAxis: {
min: 10000,
max: 100000,
gridLineColor: '#eeeeee',
gridLineWidth: 1,
title: {
text: 'Sales',
style: {
fontWeight: "bold",
fontSize: "14"
}
},
label: {
formatter: function () {
return (this.y / 1000) + "k"
}
},
tickWidth: 0,

},
series: salesoptimizationgraphhData()
}, function (chart) {
label = chart.xAxis[0].plotLinesAndBands[0].label;
image = chart.xAxis[0].plotLinesAndBands[0].image;
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: '#004a80'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
zIndex: 100
}).translate(0, 0).addClass('image').on('mousedown', start).add();
});
});

我怎样才能做到这一点?

最佳答案

您可以将样条和散点系列与 Draggable Points 结合使用插件。

示例:http://jsfiddle.net/0moy3q71/

var chart = new Highcharts.Chart({

chart: {
renderTo: 'container',
animation: false
},

plotOptions: {
series: {
stickyTracking: false
},
scatter: {
cursor: 'move'
}
},

series: [{
data: [[3,200],[5,123]],
draggableY: true,
draggableX: true,
dragMinY: 0,
type: 'scatter'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
type: 'spline'
}]

});

关于javascript - Highcharts 中样条图中的标记/圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37314801/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com