jQuery flotcharts - 첫 번째 그래프의 값만 툴팁에 표시합니다.

Question

저는 flotCharts를 사용하고 있으며 두 개 이상의 막대 그래프를 사용하는 경우 막대를 가져 가면 마지막 그래프의 값만 표시되고 다른 그래프는 첫번째 값과 같은 값. 여기에 코드입니다 :

HTML :

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

자바 스크립트 :

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

그것을 고정 문제 동일한 그래프를 두 번 이상 포함 시켰기 때문에 동일한 변수를 덮어 쓰는 것이 었습니다. 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; 
      }, 
     } 
    }); 
});