jQuery Flotcharts - Tooltip zeigt nur den Wert des ersten Graphen an

Question

Ich benutze flotCharts und wenn ich zwei oder mehr Balkendiagramme verwende, wird beim Schweben des Balkens der Wert des zuletzt geladenen Graphen angezeigt und die anderen Graphen erhalten den gleicher Wert des ersten. Hier ist der Code:

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; 
      }, 
     } 
    }); 
}); 

der @ControlID Wert ist ein Guid und es wird automatisch generiert zufällig und es ist immer unterschiedlich zwischen Charts.

Im Beispiel unten, wenn i zu der zweiten Leiste des Graphen schwebe, ist es der zweite Balken Wert der anderen Grafik zeigt (nur die xaxes falsch ist):

Answer 1

ich es befestigt ist, das Problem, war, dass ich dieselbe Variable überschrieb, weil ich sie mehr als einmal für jeden Graph einschloss. Die Lösung besteht darin, die Methodennamen so zu ändern, dass sie mit Hilfe der he-IDs eindeutig werden, wie Raidri in den Kommentaren sagt:

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; 
      }, 
     } 
    }); 
});