1
我有一些數字,包括正面和負面,我想以線(林德圖或趨勢)的格式顯示它們。我發現gRaphael很有趣,我看到一對夫婦的例子表明,它與正數的作品完美,但我不能找到任何好的插件顯示類似下面的正反兩方面的價值: jquery插件繪製趨勢的正面和負面的價值
有沒有什麼好的插件來適應這個要求?
我有一些數字,包括正面和負面,我想以線(林德圖或趨勢)的格式顯示它們。我發現gRaphael很有趣,我看到一對夫婦的例子表明,它與正數的作品完美,但我不能找到任何好的插件顯示類似下面的正反兩方面的價值: jquery插件繪製趨勢的正面和負面的價值
有沒有什麼好的插件來適應這個要求?
你可以用jqPlot這樣做。
Here's the code demo at jsFiddle,在Firefox測試,使用jqPlot表示與像您的示例負數據點的趨勢。
我發現jqPlot比Flot或gRaphael更容易使用更多的選項和更好的文檔。
jQuery(document).ready(function() {
chartData= [["1", "-1","2","-3","4"]];
ticks = ['Monday','Tuesday','Wed','Thursday','Friday'];
chartHistorical('history',chartData,ticks);
function chartHistorical(chartId,chartData,ticks){
var chart = jQuery.jqplot(chartId, chartData, {
animate: !jQuery.jqplot.use_excanvas,
seriesDefaults: {
renderer: jQuery.jqplotLineRenderer,
pointLabels: {
show: true
},
},
series: [{
label: 'Series1'
} ],
seriesColors: ["#efa229"],//"#245779",
axesDefaults: {
base: 10, // the logarithmic base.
tickDistribution: 'evens', // 'even' or 'power'.
// 'even' will produce
// with even visiual
// (pixel)
// spacing on the axis. 'power' will produce ticks
// spaced by
// increasing powers of the log base.
},
axesDefaults : {
tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '14pt' // font size for labels
}
},
axes: {
xaxis: {
renderer:jQuery.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
// Don't pad out the bottom of the data range.
// By default,
// axes scaled as if data extended 10% above and
// below the
// actual range to prevent data points right on
// grid boundaries.
// Don't want to do that here.
padMin: 0,
max: 4,
min: -4
}
},
tickOptions: {
fontSize: '14pt'
},
legend: {
show: true,
location: 'n', // compass direction, nw, n, ne,
// e, se, s, sw, w.
xoffset: 12, // pixel offset of the legend box
// from the x (or x2) axis.
yoffset: 12, // pixel offset of the legend box
// from the y (or y2) axis.
placement: 'inside'
},
cursor: {
show: false,
showTooltip: true,
tooltipLocation: 'ne',
},
grid: {
background: 'white'
}
});
}
});