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


1 Answers

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

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

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

javascript jquery charts 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();
 });
});

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



Related