jQuery flotcharts - всплывающая подсказка показывает только значение первого графика

Question

Я использую flotCharts, и когда я использую две или более гистограммы, при зависании панели отображается только значение последнего графика, а остальные графики то же значение первого. Вот код:

HTML:

<div class="flot-chart"> 
    <div class="flot-chart-content" id="flot-chart-@ControlID"></div> 
</div> 

JavaScript:

var series_@ControlID = [ 
    @foreach (var serie in Model.Series) 
    { 
     <text> 
      { 
       label: '@serie.Name', 
       @DisplayGraphType(serie) 
       data: [ 
        @foreach (var point in serie) 
        { 
         <text> 
          [@point.Item1, @point.Item2], 
         </text> 
        } 
       ] 
      }, 
     </text> 
    } 
]; 

var xlabels = [ 
    @foreach (var lbl in Model.Labels) 
    { 
     <text>[@lbl.Item1, "@lbl.Item2"],</text> 
    } 
]; 

function getLabel(xval) { 
    var lbl = xval; 
    xlabels.forEach(function(e){ 
     console.log(parseInt(e[0]) == parseInt(xval)); 
     if (parseInt(e[0]) == parseInt(xval)) { 
      lbl = e[1]; 
     } 
    }); 
    return lbl; 
} 

$(function() { 
    $.plot($("#flot-chart-@ControlID"), series_@ControlID, { 
     series: { 
      lines: { 
       lineWidth: 2, 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      }, 
      bars: { 
       barWidth: 0.6, 
       align: "center" 
      }, 
      points: { 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      } 
     }, 
     xaxis: { 
      ticks: xlabels, 
      tickDecimals: 0 
     }, 
     colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())), 
     grid: { 
      color: "#999999", 
      hoverable: true, 
      clickable: true, 
      borderWidth: 0, 
     }, 
     legend: { 
      show: true 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: function(label, xval, yval) { 
       var content = getLabel(xval) + ": " + yval; 
       return content; 
      }, 
     } 
    }); 
}); 

@ControlID значение является Guid, и он автоматически генерируется случайным образом, и это всегда отличается от диаграммы.

В приведенном ниже примере, когда я зависать на второй строке графика, это показывает второй бар значение другого графа (только xaxes неверно):

Answer 1

Я зафиксировал его, проблема было то, что я перезаписывал одну и ту же переменную, потому что я включил их более одного раза для каждого графика. Решение состоит в том, чтобы изменить имена методов, чтобы сделать их уникальными с использованием идентификаторов, как сказал Райди в комментариях:

var series_@ControlID = [ 
    @foreach (var serie in Model.Series) 
    { 
     <text> 
      { 
       label: '@serie.Name', 
       @DisplayGraphType(serie) 
       data: [ 
        @foreach (var point in serie) 
        { 
         <text> 
          [@point.Item1, @point.Item2], 
         </text> 
        } 
       ] 
      }, 
     </text> 
    } 
]; 

var xlabels_@ControlID = [ 
    @foreach (var lbl in Model.Labels) 
    { 
     <text>[@lbl.Item1, "@lbl.Item2"],</text> 
    } 
]; 

function getLabel_@(ControlID)(xval) { 
    var lbl = xval; 
    xlabels_@(ControlID).forEach(function(e){ 
     console.log(parseInt(e[0]) == parseInt(xval)); 
     if (parseInt(e[0]) == parseInt(xval)) { 
      lbl = e[1]; 
     } 
    }); 
    return lbl; 
} 

$(function() { 
    $.plot($("#flot-chart-@ControlID"), series_@ControlID, { 
     series: { 
      lines: { 
       lineWidth: 2, 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      }, 
      bars: { 
       barWidth: 0.6, 
       align: "center" 
      }, 
      points: { 
       fill: @((Model.Series.Count() == 1).ToString().ToLower()), 
      } 
     }, 
     xaxis: { 
      ticks: xlabels_@ControlID, 
      tickDecimals: 0 
     }, 
     colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())), 
     grid: { 
      color: "#999999", 
      hoverable: true, 
      clickable: true, 
      borderWidth: 0, 
      @if (Model.LimitLine != null) 
      { 
       <text> 
        markings: [ 
         { color: '#000', lineWidth: 1, yaxis: { from: @Model.LimitLine, to: @Model.LimitLine }}, 
        ] 
       </text> 
      } 
      }, 
     legend: { 
      show: true 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: function(label, xval, yval) { 
       var content = getLabel_@(ControlID)(xval) + ": " + yval; 
       return content; 
      }, 
     } 
    }); 
});