Question

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

我的输出应如下所示。我已经在图像上标记了预期的圆圈：

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

我怎样才能做到这一点？

Answer 1

Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out。

编辑：我认为将指针移动到随机位置是可以实现的，因为每个指针必须具有x轴和y轴的值。不要以为我们可以在Highcharts环境中绘制一些漂浮的东西。不鼓励其他HTML / javascript黑客攻击。

我能说的最好的是this。创建了两个系列。有些点隐藏在第一个系列中，而第二个系列中只有一个大指针可用。

Answer 2

您可以使用带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'
    }]

});

高线图中样条图中的标记/圆圈

2 个答案: