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

我修复了它，问题是我覆盖了同一个变量，因为我为每个图表多次包含了它们。解决方案是更改方法名称，使它们使用他的 ID 唯一，正如 Raidri 在评论中所说：

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

jQuery flotcharts - 工具提示仅显示第一张图的值

jQuery flotcharts - tooltip shows value of the first graph only

html

javascript

jquery

charts

flot