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 - 工具提示仅显示第一个图的值

1 个答案: