2

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

我想使用谷歌图表：条形图来可视化以最小/最大值显示为条形的访问统计行和带有水平线的平均值。

我设法显示了最小/最大值（只需堆叠最小值和最大值的系列）： 最小/最大条形图

代码（用于进入代码游乐场）是

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

现在我想整合平均值以获得类似的东西： 最小/最大/平均条形图

谁能给我一些提示如何实现这一目标？

4

3 回答 3

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]
            ]
        }]
    });
于 2013-06-03T13:25:16.643 回答
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);
    }
}
于 2013-06-02T21:11:54.830 回答
0

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

于 2015-11-18T14:45:58.803 回答