我有一个图表,其中使用jqplot绘制了4条不同的线条。我真的不想创建一个传奇,所以我想标记每一行。我看到有一个名为pointLabels的功能,但是我的标签没有显示。
//function for the line graph
$(document).ready(function () {
var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];
var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
{
title: 'All Companies',
// Series options are specified as an array of objects, one object
// for each series.
series: [
{
// Change our line width and use a diamond shaped marker.
lineWidth: 4,
markerOptions: { style: 'dimaond' },
//color: '#FFFFFF'
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
lineWidth: 4,
markerOptions: { size: 7, style: "x" }
},
{
// Use (open) circlular markers.
lineWidth: 4,
markerOptions: { style: "filledCircle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth: 4,
markerOptions: { style: "filledSquare", size: 10 }
},
{
pointLabels: { show: true, location: 's', ypadding: 3 }
},
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
label: 'Work Weeks',
max: 55,
min: 0,
tickOptions: {
formatString: '%.0f',
},
},
yaxis: {
label: 'Phases',
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yticks
}
},
}
);
});
我已经确定我也包含了pointLabels的脚本:
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
答案 0 :(得分:1)
您应该将点标签选项移到系列数组之外的seriesDefaults
部分:
seriesDefaults: {
pointLabels: { show: true, location: 's', ypadding: 3 }
}
此处更新了小提琴: http://jsfiddle.net/R6sFn/3/