我制作了一些图表,可能会在里面放一个标记,但我不明白如何使标记在y轴值下可以使用。
$.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;
},
}
});
如何显示带有值的工具提示?
图示例:
答案 0 :(得分:1)
您无法使用工具提示插件执行此操作,但在自行执行工具提示时可以执行此操作。像这样:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) { // hovering over a datapoint
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
var hideTooltip = true;
// you need to save the Flot object for this (here as "plot")
$.each(plot.getOptions().grid.markings, function(idx, marking) {
if (Math.abs(pos.y - marking.yaxis.to) < 10) {
$("#tooltip").html("Limit: " + marking.yaxis.to)
.css({top: pos.pageY + 5, left: pos.pageX + 5}).fadeIn(200);
hideTooltip = false;
return false;
}
});
if (hideTooltip) {
$("#tooltip").hide();
}
}
});
基于此example。