更新:我会使用任何图表库,而不仅仅是Google图表:
我想使用Google Charts: Bar Chart来显示以最小值/最大值显示的访问统计数据行作为条形图和具有水平线的平均值。
我设法显示最小/最大值(只是叠加最小和最大的系列):
代码(用于输入Code playground)是
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Function', 'Min', 'Max'],
['functionA', 0, 150],
['functionB', 11, 100],
['functionC', 20, 150],
['functionD', 5, 7],
['functionE', 0, 22],
['functionF', 23, 55]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Min/Max Demo",
width:600, height:400,
isStacked: true,
hAxis: {title: "Duration [ms]"}
}
);
}
现在我想整合平均值来得到类似的东西:
任何人都可以给我一些提示如何实现这个目标吗?
答案 0 :(得分:3)
Highcharts中的示例:http://jsfiddle.net/Yrygy/27/
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
categories: ['f1', 'f2', 'f3']
},
series: [ {
name: 'max',
stacking: true,
color: 'red',
data: [
[100],
[120],
[50]
]
}, {
name: 'min',
stacking: true,
color: 'blue',
data: [
[13],
[50],
[1]
]
}, {
type: 'scatter',
name: 'avg',
color: 'black',
data: [
[44],
[55],
[12]
]
}]
});
答案 1 :(得分:1)
看起来你正在寻找一个javascript解决方案...但是你的问题被标记为jfreechart ...所以这里是jfreechart代码:( ...如果是webapp,你需要提供图像例如通过休息服务)
import java.awt.*;
import org.jfree.chart.*;
import org.jfree.chart.axis.*;
import org.jfree.chart.plot.*;
import org.jfree.chart.renderer.category.*;
import org.jfree.data.category.*;
import org.jfree.ui.*;
public class StackedAndLevelChart extends ApplicationFrame {
public StackedAndLevelChart(final String title) {
super(title);
final JFreeChart chart = constructChart();
final ChartPanel panel = new ChartPanel(chart);
setContentPane(panel);
}
JFreeChart constructChart() {
DefaultCategoryDataset barDS = new DefaultCategoryDataset();
Object [][] vals = {
{"Function", "Min", "Max"},
{"functionA", 0, 150},
{"functionB", 11, 100},
{"functionC", 20, 150},
{"functionD", 5, 7},
{"functionE", 0, 22},
{"functionF", 23, 55}
};
for (int i=1; i<vals.length; i++) {
barDS.addValue((Number)vals[i][1], (String)vals[0][1], (String)vals[i][0]);
barDS.addValue((Number)vals[i][2], (String)vals[0][2], (String)vals[i][0]);
}
JFreeChart chart = ChartFactory.createStackedBarChart(
"Min/Max demo", // chart title
null, // domain axis label
"duration [ms]", // range axis label
barDS, // data
PlotOrientation.HORIZONTAL, // the plot orientation
true, // legend
true, // tooltips
false // urls
);
DefaultCategoryDataset levelDS = new DefaultCategoryDataset();
double [] avg = { 0, 48, 20, 70, 5, 10, 45 };
for (int i=1; i<avg.length; i++) {
levelDS.addValue(avg[i], "avg", (String)vals[i][0]);
}
CategoryPlot plot = chart.getCategoryPlot();
plot.setRangeAxisLocation(AxisLocation.BOTTOM_OR_LEFT);
chart.getLegend().setPosition(RectangleEdge.RIGHT);
CategoryItemRenderer renderer1 = plot.getRenderer();
renderer1.setSeriesPaint(0, Color.BLUE);
renderer1.setSeriesPaint(1, Color.RED);
CategoryItemRenderer renderer2 = new LevelRenderer();
plot.setDataset(1, levelDS);
plot.setRenderer(1, renderer2);
plot.setDatasetRenderingOrder(DatasetRenderingOrder.FORWARD);
renderer2.setSeriesPaint(0, Color.BLACK);
renderer2.setSeriesStroke(0, new BasicStroke(5.0f));
return chart;
}
public static void main(String[] args) {
StackedAndLevelChart demo = new StackedAndLevelChart("");
demo.pack();
RefineryUtilities.centerFrameOnScreen(demo);
demo.setVisible(true);
}
}
答案 2 :(得分:0)
似乎标准的盒子图表应该能够准确地给出你想要的东西,但它是一种非常标准的图表类型。我找到了一种方法来绘制包含数据的箱形图。或者我错过了什么?