jQuery flotcharts - 最初のグラフのみの値をツールチップに表示

Question

私はflotChartsを使用していますが、2つ以上の棒グラフを使用しているときは、棒グラフをホバリングすると最後にロードされたグラフの値のみが表示され、最初の値と同じ値。ここでは、コードです：

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ですし、それが自動的にランダムに生成され、それがチャートの間で常に異なるのです。 iは、グラフの第二バーに置いたときに以下の例で

は、それが他のグラフの第2のバー値（のみxaxesが間違っている）を示している：

Answer 1

私はそれを修正し、問題私は同じ変数を上書きしていたということでした。なぜなら、私はそれらをそれぞれのグラフに対して複数回含んでいたからです。 Raidriがコメントで言ったように、解決方法はメソッドIDを使用してメソッド名を変更することです：

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