[Javascript] علامات / دوائر في مخطط مخطط في نقاط عالية


Answers

نأمل أن أفهم سؤالك بشكل صحيح. لقد قمت بإنشاء مخطط مخطط. ركز على بيانات آب (أغسطس) حيث أحدد بوضوح marker مستقلة. تحقق من ذلك.

تحرير: لا أعتقد أنه يمكن تحقيقه لنقل مؤشر إلى مكان عشوائي كما يجب أن يكون لكل مؤشر قيم لكل من المحور س و ص. لا أعتقد أننا يمكن أن مؤامرة شيء الذي يتدفق في سياق هايغتشارتس. لا يشجع هتمل / جافاسكريبت القرصنة الأخرى حولها.

أفضل ما يمكنني الخروج هو هذا . يتم إنشاء مجموعتين. يتم إخفاء بعض النقاط في السلسلة الأولى ومؤشر كبير واحد فقط المتاحة في السلسلة الثانية.

Question

لدي سيناريو حيث في لدي لإنشاء علامات / دوائر في المخطط الخطي. أنا خلقت المخطط الخطي باستخدام هايغتشارتس، رمز أدناه للرسم البياني.

وينبغي أن يكون بلدي الانتاج أدناه. وقد وضعت علامة على الدوائر المتوقعة الصورة:

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

كيف يمكنني تحقيق ذلك؟