Блог

Jqplot cursor отлично работает на рабочем столе. Он следует за мышью, но я хочу, чтобы он следовал за виртуальной мышью в телефоне. Событием для этого будет vmouseover . Курсор Jqplot по умолчанию, похоже, не следует за мышью (т. Е. касанием (не касанием)) в Android. Могу ли я каким-либо образом переопределить событие, на которое отвечает курсор, чтобы я мог заставить его работать в Android. В настоящее время я перерисовываю весь график vmouseover события, но это слишком дорого для процессора. Я хочу, чтобы графики вели себя так же, как графики в приложениях для акций (см. Рисунок ниже)

Ниже приведен мой код. Прошу прощения за любую синтаксическую ошибку.

    $(document).delegate("div[data-role*='page']", "pageshow", function () {

     $.jqplot.config.enablePlugins = true;
     var plot1;

     $(window).on('orientationchange', function (event) {
            console.log(orientation);

             $('#chartdiv').empty();
             setTimeout(function ()
             {
                 plot1.replot({ resetAxes: true });
             }, 200);
     });

     var s11 = [2, 6, 7, 10];
     var s1 = [200, 600, 700, 1000];
     var s2 = [];
     var s3 = [260, 440, 320, 200];

     legendLabels = ['Load/Unload', 'Cycle'];

     var options = {
         //Only animate if we're not using excanvas (not in IE 7 or IE 8)..
         //animate: !$.jqplot.use_excanvas,

         seriesDefaults:
             {
                 renderer: $.jqplot.BarRenderer,
                 rendererOptions: { fillToZero: true }
             },

         series: [
           {label:'Timing',renderer:$.jqplot.BarRenderer, },
           { label: 'CrossHair', renderer: $.jqplot.LineRenderer, color: 'red', },
           { label: 'CrossHair', renderer: $.jqplot.LineRenderer, color: 'red', }
         ],

         cursor: {
             showTooltip: true,
             tooltipLocation: 'sw',
             followMouse: true,
             zoom: true
         },

         legend: {
             renderer: $.jqplot.MekkoLegendRenderer,
             show: true,
             location: 'n',
             labels: legendLabels,
             rendererOptions:
             {                    
                 numberRows: 1,
                 placement: "outside"
             },
             marginTop: "30px"
         },

         axes: {
             // Use a category axis on the x axis and use our custom ticks.
             xaxis: {
                 renderer: $.jqplot.LinearAxisRenderer,
                 ticks: ticks
             },
             // Pad the y axis just a little so bars can get close to, but
             // not touch, the grid boundaries.  1.2 is the default padding.
             yaxis: {
                 pad: 1.05,
                 tickOptions: { formatString: '$%d' }
             }           
         },           
     };

     plot1 = $.jqplot('chartdiv', [s1, s2, s3], options);

        $('#chartdiv').bind('vmousemove', function (ev, seriesIndex, pointIndex, data, radius) {
             $('.jqplot-event-canvas').css('cursor', 'pointer');

             var loc = new Array;
             loc.push([((ev.pageX - this.offsetLeft) / this.offsetWidth) * plot1.axes.xaxis.max,
                        ((ev.pageY - this.offsetTop) / this.offsetHeight)*plot1.axes.yaxis.max]);
             console.log(loc[0]);

             plot1.destroy();
             plot1 = $.jqplot("chartdiv", [s1, [[((ev.pageX - this.offsetLeft) / this.offsetWidth) * plot1.axes.xaxis.max,0],
                 [((ev.pageX - this.offsetLeft) / this.offsetWidth) * plot1.axes.xaxis.max, 1100]]], options);

         });