Почему символы отображаются три раза на графике?

Question

Я использую библиотеку флота, чтобы отобразить график, в котором изображения PNG отображаются как точки. Он работает, но каждое изображение PNG, кажется, отображается три раза. Это видно при обновлении (перекрытие не идеально), и я также зарегистрировал функцию загрузки изображения, и Firebug сообщает мне, что он вызывается три раза для каждого графика. Вот функция, которая делает изображения (счетчик является переменной каротаж):

function generateImageFunction (image) { 
    return function getImage(ctx, x, y, radius, shadow) {     
     var img = new Image(); 
     img.onload = function() { 
      console.log(counter++); 
      ctx.drawImage(img, x, y, img.width, img.height);  
     } 
     img.src = image; 
    } 
} 

данные 13 серии, это только первые два, как пример:

var data = [ 
      { 
      data: [[1, 1]], 
      points: { symbol: generateImageFunction("face-angel.png") } 
      } 
      { 
      data: [[2, 2]], 
      points: { symbol: generateImageFunction("face-angry.png") } 
      } 
      ]; 

Мои варианты являются следующие:

var options = { 
       series: { 
        points: { show: true }, 
       }, 
       xaxis: { min: 0, max: 15}, 
       yaxis: { show: false, min: 0, max: 15 }, 
       selection: { mode: "x" } 
}; 

А потом я $.plot($("#placeholder"), data, options);

С 13 данных как таковых ries, переменная счетчика переходит к 39, когда я сначала загружаю страницу. Если я увеличиваю масштаб в области только с одной точкой данных, счетчик увеличивается на 3. Может ли кто-нибудь сказать мне, почему это происходит, или что я могу сделать дальше?

Answer 1

Если вы не переопределить глобальный или за серии варианта shadowSize, Flot будет рисовать тень под каждую серию. Тень рисуется в два этапа (поиск кода для функции plotPoints, чтобы увидеть, как это делается) увеличения непрозрачности, чтобы смягчить границу.

Итак, ваша функция запускается один раз, чтобы нарисовать тень на альфа-0,1, снова нарисовать ее на уровне альфа-0,2, а затем еще раз нарисовать фактическую серию.

Если вы этого не хотите, вы можете полностью отключить тень, установив shadowSize на ноль. Вы также можете пропустить рисование тени только для точек, проверив значение параметра «тень» функции; если это правда, что касается двух вызовов, используемых для рисования тени, то вы можете сразу вернуться.

Если вы идете с последним, я бы определенно сделал так же, как @Ryley предложил избежать загрузки изображения несколько раз.

Answer 2

Что делает ваш код, это повторная загрузка изображения каждый раз, когда точка используется флотом. По общему признанию, флот, вероятно, не должен использовать его 3 раза за $.plot, но вы ничего не можете с этим поделать! Что вы можете сделать, это загрузить изображение только один раз!

function generateImageFunction(image) { 
    return function getImage(ctx, x, y, radius, shadow) { 
     ctx.drawImage(image, x, y, image.width, image.height); 
    } 
} 

//list out all used images here 
var symbols = { 
    'icon1': 'http://tinychat.com/public/images/star.png', 
     'icon2': 'http://www.earthdetails.com/images/icons/X-16-01.gif' 
}; 
var symbol2image = {};//used to reference the downloaded image 
var loading = [];//just used in the $.load call 

//start loading each image 
for (var symbol in symbols) { 
    var img = new Image(); 
    img.src = symbols[symbol]; 
    symbol2image[symbol] = img; 
    loading.push(img); 
} 

//wait until they are all loaded, then call the plot function 
$.apply($, loading).load(function() { 

    //setup data/options here, key lines being how you call the new generateImageFunction 
       symbol: generateImageFunction(symbol2image['icon2']) 

    //call plot 
    $.plot($("#placeholder"), data, options); 
}); 

Существует рабочий пример здесь: http://jsfiddle.net/ryleyb/kEhsQ/2/