用于显示最小值/最大值/平均值的条形图

Question

更新：我会使用任何图表库，而不仅仅是谷歌图表：

我想使用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]"}
           }
      );
}

现在我想整合平均值以获得如下结果：

谁能给我一些提示如何做到这一点？

Answer 1

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]
            ]
        }]
    });

Answer 2

看起来您正在寻找 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);
    }
}

Answer 3

似乎一个标准的箱线图应该给你你想要的东西，但它是一种非常标准的图表类型。我会找到一种用您的数据绘制箱线图的方法。还是我错过了什么？