我遇到了jQuery flot和jquery.flot.symbol用法的问题。我使用jquery.flot渲染一个flot并使用一个额外的插件（jquery.flot.symbol在图形上做一些矩形）。
问题是当我倒转轴时（牛从右到左开始，oy位置在右边）。在jquery.flot.symbol的帮助下生成的部分超出了网格，零值在某种程度上超出了图形（换句话说，所有值都移到了右边）
http://jsfiddle.net/5L3eyafn/2/
以及代码的相关部分
var data1 = [
{
data: graphData,
bars: {
show: true,
lineWidth: 3,
horizontal: false,
fillColor: "#f8e7b3"
},
color: "#ffffff"
},
{
data: trendData,
points: {
show: true,
lineWidth: 3,
radius: 10,
fill: true,
fillColor: "#000000",
symbol: "rectangleGraph"
},
color: "#000000"
}
];
$.plot($(".graph"), data1, {
grid:{
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis:{
show: true,
transform: function (v) { return -v; },
inverseTransform: function (v) { return -v; }
},
yaxis: {
show: true,
position: "right"
}
});
答案 0 :(得分：1)
这里的问题是条形图在默认情况下左对齐，通过转换向右切换到对齐方式。这不会随符号自动发生。在这里你必须手工完成。
1）将条形对齐方式更改为条形（fiddle）：
更改
ctx.rect(x + 3, y - 8, 12, 1); //12 - width, 1 - height
到
ctx.rect(x - 15, y - 8, 12, 1); //12 - width, 1 - height
如果您希望能够在正常轴和反向轴之间切换，则必须使用变量作为x偏移。
2）使用中心对齐（fiddle）：
将以上行更改为
ctx.rect(x - 6, y - 8, 12, 1); //12 - width, 1 - height
并将其添加到bars选项：
align: "center"
使用中心对齐，您可以在正常和反向之间切换，而无需更改符号代码。 （并且它更好地显示哪个条属于哪个x值。）
3）符号y值的修正（fiddle）：
正如您在1）和2）的小提琴中所看到的，值x = 0的符号位于条形图上方，但它不应该是（符号y = 41.6，条形{{1 }}）。
要更正此问题，您还可以将代码行中的y偏移从上方更改为
y = 42.0以下是2）加上3）作为代码片段的结果：
ctx.rect(x - 6, y + 1, 12, 1); //12 - width, 1 - height
/*
Flot plugin that adds some extra symbols for plotting points.
The symbols are accessed as strings through the standard symbol
choice:
series: {
points: {
symbol: "square" // or "diamond", "triangle", "cross"
}
}
*/
(function ($) {
function processRawData(plot, series, datapoints) {
// we normalize the area of each symbol so it is approximately the
// same as a circle of the given radius
var handlers = {
square: function (ctx, x, y, radius, shadow) {
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
diamond: function (ctx, x, y, radius, shadow) {
// pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
var size = radius * Math.sqrt(Math.PI / 2);
ctx.moveTo(x - size, y);
ctx.lineTo(x, y - size);
ctx.lineTo(x + size, y);
ctx.lineTo(x, y + size);
ctx.lineTo(x - size, y);
},
triangle: function (ctx, x, y, radius, shadow) {
// pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
var height = size * Math.sin(Math.PI / 3);
ctx.moveTo(x - size / 2, y + height / 2);
ctx.lineTo(x + size / 2, y + height / 2);
if (!shadow) {
ctx.lineTo(x, y - height / 2);
ctx.lineTo(x - size / 2, y + height / 2);
}
},
cross: function (ctx, x, y, radius, shadow) {
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.moveTo(x - size, y - size);
ctx.lineTo(x + size, y + size);
ctx.moveTo(x - size, y + size);
ctx.lineTo(x + size, y - size);
},
rectangle: function (ctx, x, y, radius, shadow) {
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x + 2, y - 8, 5, 8); //5 - width, 9 - height
},
rectangleGraph: function (ctx, x, y, radius, shadow) {
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
//ctx.rect(x + 3, y - 8, 12, 1); //12 - width, 1 - height
ctx.rect(x - 6, y + 1, 12, 1); //12 - width, 1 - height
}
};
var s = series.points.symbol;
if (handlers[s]) series.points.symbol = handlers[s];
}
function init(plot) {
plot.hooks.processDatapoints.push(processRawData);
}
$.plot.plugins.push({
init: init,
name: 'symbols',
version: '1.0'
});
})(jQuery);
// end of symbol plugin
$(document).ready(function () {
var graphData = [
[0, "42.00"],
[1, "42.00"],
[2, "42.00"],
[3, "42.00"],
[4, "42.00"],
[5, "42.00"],
[6, "42.00"],
[7, "42.00"],
[8, "42.00"],
[9, "42.00"],
[10, "42.00"],
[11, "42.00"],
[12, "43.00"],
[13, "43.00"],
[14, "43.00"],
[15, "43.00"],
[16, "43.00"],
[17, "43.00"],
[18, "43.00"],
[19, "43.00"],
[20, "43.00"],
[21, "43.00"],
[22, "43.00"],
[23, "42.00"],
[24, "42.00"],
[25, "42.00"],
[26, "41.00"],
[27, "41.00"],
[28, "41.00"],
[29, "41.00"],
[30, "41.00"],
[31, "41.00"],
[32, "41.00"],
[33, "41.00"],
[34, "41.00"],
[35, "41.00"],
[36, "41.00"],
[37, "40.00"],
[38, "40.00"],
[39, "41.00"],
[40, "41.00"],
[41, "40.00"]
];
var trendData = [
[0, "41.60"],
[1, "39.93"],
[2, "39.13"],
[3, "38.87"],
[4, "38.20"],
[5, "37.93"],
[6, "37.13"],
[7, "36.73"],
[8, "36.27"],
[9, "36.07"],
[10, "34.60"],
[11, "35.20"],
[12, "35.00"],
[13, "33.53"],
[14, "34.07"],
[15, "33.47"],
[16, "32.93"],
[17, "31.40"],
[18, "32.07"],
[19, "30.07"],
[20, "28.80"],
[21, "29.00"],
[22, "28.67"],
[23, "29.20"],
[24, "26.13"],
[25, "28.40"],
[26, "26.27"],
[27, "25.07"],
[28, "25.07"],
[29, "24.53"],
[30, "25.80"],
[31, "20.40"],
[32, "25.07"],
[33, "23.27"],
[34, "22.13"],
[35, "22.07"],
[36, "20.27"],
[37, "22.07"],
[38, "18.67"],
[39, "19.13"],
[40, "18.87"],
[41, "18.67"]
];
var data1 = [{
data: graphData,
bars: {
show: true,
lineWidth: 3,
horizontal: false,
fillColor: "#f8e7b3",
align: "center"
},
color: "#ffffff"
}, {
data: trendData,
points: {
show: true,
lineWidth: 3,
radius: 10,
fill: true,
fillColor: "#000000",
symbol: "rectangleGraph"
},
color: "#000000"
}];
$.plot($(".graph"), data1, {
grid: {
tickColor: "#eee",
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: {
show: true,
//*
transform: function (v) {
return -v;
},
inverseTransform: function (v) {
return -v;
}
//*/
},
yaxis: {
show: true,
position: "right"
}
});
});.graph {
width: 800x;
height: 300px;
}