Javascript 如何在flot图表文本数据中将x轴值设置为工具提示
我尝试用Flot char中的以下代码绘制图表。图表正在按预期打印，但未显示工具提示Javascript 如何在flot图表文本数据中将x轴值设置为工具提示,javascript,jquery,flot,Javascript,Jquery,Flot,我尝试用Flot char中的以下代码绘制图表。图表正在按预期打印，但未显示工具提示 $（函数（）{ 风险值数据=[ [“2006年8月”，2]， [“2007年8月1日]， [“8月8日”，1.5]， [“2009年8月”，0]， [“8月10日”，0]， [“8月11日”，0]， [“8月12日”，0] ]; 变量选项={ 系列：{ 线路：{ 秀：没错， 线宽：1， 填充：是的， 填充颜色：{ 颜色：[{ 不透明度：0.5 }, { 不透明度：0.2 }] } }, 要点：{ 秀：没错，
$（函数（）{
风险值数据=[
[“2006年8月”，2]，
[“2007年8月1日]，
[“8月8日”，1.5]，
[“2009年8月”，0]，
[“8月10日”，0]，
[“8月11日”，0]，
[“8月12日”，0]
];
变量选项={
系列：{
线路：{
秀：没错，
线宽：1，
填充：是的，
填充颜色：{
颜色：[{
不透明度：0.5
}, {
不透明度：0.2
}]
}
},
要点：{
秀：没错，
线宽：2
},
阴影大小：0
},
网格：{
悬停：是的，
可点击：正确，
勾选颜色：“#eeeeee”，
边框宽度：0，
悬停：是的，
可点击：正确
},
提示：正确，
工具提示：{
内容：“您对%x的销售额为$%y”，
默认主题：false
},
xaxis：{
模式：“类别”，
长度：0
},
亚克斯：{
最低：0
},
选择：{
模式：“x”
}
};
$.plot（#剖面图，[数据]，选项）；
//将Flot版本字符串添加到页脚
$（“#页脚”）.prepend（“Flot”+$.plot.version+“&ndash；”）；
});
#剖面图{
宽度：600px；
高度：300px；
}
解决问题的最简单方法是用回调替换内容
字符串：
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
我定义了getTooltip
以获得所需的输出：
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y;
}
它是有效的，正如你在里面看到的，但是你可能需要考虑上尉的建议，在评论中，看看你的情况是什么样的。
< P>最简单的方法是用回调替换<代码>内容< /代码>字符串：
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
我定义了getTooltip
以获得所需的输出：
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y;
}
它是有效的，正如你在上面看到的，但是你可能需要考虑上尉的建议，在评论中，看看你的情况是什么样的。
< P>解决方案是使用<强> TooTyPopts <强> >强> >内容< /强>方法，用回调函数正确地将动态数据返回到标签。
我发现，将第四个参数传递给“ToolTipts”的回调函数，实际上可以得到构建图表/图形的整个数据对象。
从这里，您可以轻松地提取X轴标签，使用该函数的第二个参数作为要提取的标签的索引
例如：
我要传递给绘图函数的数据对象：
[
{
data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
points: { show: true, radius: 3},
splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
}
],
{
colors: ['#0cc2aa'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
},
yaxis:{ show: true, font: { color: '#ccc' }, min:1},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
从上述数据对象呈现的图表：
[
{
data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
points: { show: true, radius: 3},
splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
}
],
{
colors: ['#0cc2aa'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
},
yaxis:{ show: true, font: { color: '#ccc' }, min:1},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
正如您在图像预览中看到的，用于从实际数据动态呈现标签内容的逻辑如下：
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
解决方案是使用带有回调函数的工具提示->内容方法将动态数据正确返回到标签
我发现，将第四个参数传递给“ToolTipts”的回调函数，实际上可以得到构建图表/图形的整个数据对象。
从这里，您可以轻松地提取X轴标签，使用该函数的第二个参数作为要提取的标签的索引
例如：
我要传递给绘图函数的数据对象：
[
{
data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
points: { show: true, radius: 3},
splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
}
],
{
colors: ['#0cc2aa'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
},
yaxis:{ show: true, font: { color: '#ccc' }, min:1},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
从上述数据对象呈现的图表：
[
{
data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
points: { show: true, radius: 3},
splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
}
],
{
colors: ['#0cc2aa'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
},
yaxis:{ show: true, font: { color: '#ccc' }, min:1},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
正如您在图像预览中看到的，用于从实际数据动态呈现标签内容的逻辑如下：
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
你用的是什么工具提示插件？@DNS我用jquery.flot.tooltip.js你能用fiddle吗？你的数据很乱。数据格式应该是[x，y]
，其中x和y都应该是整数
。您应该使用模式：“时间”
并通过x的勾选格式设置程序功能返回日期。这适用于you@captain我已经创建了fiddle，请检查您使用的工具提示插件是什么？@DNS我使用jquery.flot.tooltip.js您可以使用fiddle吗？您的数据非常混乱。数据格式应该是[x，y]
，其中x和y都应该是整数
。您应该做的是使用模式：“时间”
并通过勾号格式化程序函数返回x的日期。这对you@captain我已经创建了小提琴检查