我正在动态开发Slope＆amp; amp;使用JQplot进行总线时间表的平面图表。 根据我的要求，除了绘制的图表，我想在图表上绘制一些虚线。为此我静态使用 horizontalLine，verticalLine 和 canvasOverlay 行。 我想动态绘制这些线条。行数和所有必需点将分别来自xml文件本身。 根据我的理解， canvasOverlay 将horizontalLine，verticalLine和line作为具有某些属性的数组对象。我想从动态创建的数组中传递这些对象，但我无法实现这些行。 我的查询的任何解决方案都非常感谢。
答案 0 :(得分：4)
这是一个解释如何用canvasOverlay绘制线条的小提琴：
$.jqplot.tickNumberFormatter = function(format, val) {
if (typeof val == 'number') {
if (val == "3.0") {
return String("High");
} else if (val == "2.0") {
return String("Medium");
} else if (val == "1.0") {
return String("Low");
} else return String(" ");
} else {
return String(val);
}
};
BuildReadinessGraph();
function BuildReadinessGraph() {
var grid = {
gridLineWidth: 1.5,
gridLineColor: 'rgb(235,235,235)',
drawGridlines: true
};
var data = [
['2012-09-13', 1],
['2012-10-22', 2],
['2012-01-12', 3]
];
$.jqplot.postDrawHooks.push(function() {
$(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back
$(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front
$(".jqplot-highlighter-tooltip").css('z-index', '2');
$(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});
$.jqplot('ChartDIV', [data], {
series: [{
showMarker: true
}],
seriesDefaults: {
showMarker: true,
pointLabels: {
show: true
}
},
grid: grid,
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
tickOptions: {
formatString: '%d'
},
canvasOverlay: {
show: true,
objects: [{
line: {
start: [new Date('2012-05-01').getTime(), 0],
stop: [new Date('2012-05-10').getTime(), 0],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap: 'butt'
}
}
]
},
axes: {
xaxis: {
label: 'Dates',
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
tickOptions: {
formatString: '%d/%m/%Y',
angle: -30,
fontFamily: 'Arial',
fontSize: '13px',
fontWeight: 'bold'
},
min: "01-01-2012",
tickInterval: '2 month',
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3'
}
},
yaxis: {
label: 'Levels',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
formatter: $.jqplot.tickNumberFormatter // my formatter
},
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3',
angle: -90
}
}
}
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasOverlay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.highlighter.js"></script>
<div id="ChartDIV"> </div>
有趣的“线”创作代码：
grid:
{
drawGridLines: true, // whether to draw lines across the grid or not.
gridLineColor: '#cccccc', // Color of the grid lines.
backgroundColor: "#eee",
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
},
canvasOverlay: {
show: true,
objects:
[
{
line:
{
start : [new Date('2012-01-12').getTime(),20],
stop : [new Date('2012-01-13').getTime(),20],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap : 'butt'
}
},
{
line:
{
start : [new Date('2012-01-13').getTime(),20],
stop : [new Date('2012-01-14').getTime(),20],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap : 'butt'
}
}
]
}
想法是添加“line”部分并调用plot.replot();方法重绘图形。
您可以使用如下所示的线点填充数组：
var myArrayPoints = Array();
var myArrayPoints.push({ line:
{
start : [new Date('2012-01-12').getTime(),20],
stop : [new Date('2012-01-13').getTime(),20],
lineWidth: 1000,
color: 'rgba(255, 0, 0,0.45)',
shadow: false,
lineCap : 'butt'
}
});
//Used in JQPlot like that
canvasOverlay: {
show: true,
objects: [ myArrayPoints ]
}