通过canvasOverlay动态地在JQPlot中创建horizontalLine和verticalLine [英] horizontalLine and verticalLine in JQPlot dynamically by canvasOverlay
问题描述
我正在动态开发Slope&使用JQplot作为公交车时间表的平面图. 根据我的要求，除了绘制图表外，我还希望在图表上绘制一些虚线.为此，我静态使用 horizontalLine，verticalLine 和 canvasOverlay 的行. 我想动态绘制这些线.行数和所有必需的点将分别来自xml文件本身. 根据我的理解， canvasOverlay 将"horizontalLine"，"verticalLine"和"line"作为具有某些属性的数组对象.我想通过动态创建的数组传递这些对象，但是我无法实现这些行. 非常感谢我提出的任何查询解决方案.
I am in the process of developing dynamically Slope & Flat Chart using JQplot for Bus Time Table. According to my requirement, apart from the plotted chart I want to plot some dotted lines on the graph. For this I am using horizontalLine, verticalLine and line of canvasOverlay statically. I want to draw these lines dynamically. The number of lines and all the required points will come from an xml file itself respectively. As per my understanding the canvasOverlay is taking horizontalLine, verticalLine and line as array objects with some properties. I want to pass these objects from dynamically created array, but I am not able to achieve these lines. Any solutions to my queries are highly appreciated.
推荐答案
下面是一个小提琴，用以说明如何使用canvasOverlay画一条线:
Here's a fiddle to explain how draw a line with 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>
带有有趣的行"创建代码:
With interesting code of "line" creation :
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'
}
}
]
}
想法是添加一个线"部分并调用plot.replot();方法以重绘该图.
您可以像这样用线点填充数组:
The idea would be to add a "line" section and call the plot.replot(); method to redraw the graph.
You could populate an array with your line points like this :
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 ]
}
这篇关于通过canvasOverlay动态地在JQPlot中创建horizontalLine和verticalLine的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
