Question

我正在尝试创建一个如下所示的Google图表：

http://chart.googleapis.com/chart?cht=bvs&chs=200x125&chd=t2:10,50,60,80,40%7C50,60,100,40,20%7C30,70,90,95,45&chco=4d89f900,c6d9fd&chbh=20&chds=0,160&chm=H,336699,2,-1,1:22

基本上，我只是想在一张图表上表示最大值，最小值和平均值，但我似乎无法弄清楚如何做到这一点。我知道可以在旧的基于URL的图表中使用标记，但是它们已被弃用，而且看起来新API还不支持标记。

我尝试使用烛台，但我使用它的唯一方法是使用细线和中间的水平线，所以它看起来像一堆加号而不是带有线标记的浮动列。我知道我也可以在技术上堆叠带有阶梯面积图的柱形图，但是这条线在所有条目中都是连续的，这是我不想要的。

感谢。

编辑：使用jmac的方法和间隔，我提出了这个：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'label');
  data.addColumn('number', 'filler');
  data.addColumn('number', 'range');
  data.addColumn({type:'number', role:'interval'});
  data.addRows([
    ['A', 3, 4, 2],
    ['B', 2, 5, 4],
    ['C', 4, 4, 1],
    ['D', 5, 2, 1],
    ['E', 1, 8, 4],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
    width: 600,
    isStacked: true,
    series: [{color:'transparent'},{color:'silver'},{color:'silver'}],
    vAxis: {gridlines: {color: 'transparent'}, textPosition: 'none'},
    focusTarget: 'category',
    intervals: { 'style': 'bars', 'barWidth': 1.3, 'lineWidth': 2 },
  });
}

我没有足够的声誉来发布它的样子，但是如果你把它粘贴在这里就可以看到它：https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

此外，因为当你将鼠标悬停在它上面时它仍会突出显示填充区域，我发现了一个css hack来隐藏鼠标上的突出显示：

#chart-div {
    svg g g g g rect {
      stroke-width:0px;
    }
}

Answer 1

你可以使用＆＃34; box＆＃34;样式间隔可以达到你想要的效果：

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'Min');
    data.addColumn('number', 'Average');
    data.addColumn('number', 'Max');

    data.addRows([
        ['Foo', 3, 5, 7],
        ['Bar', 5, 8, 10],
        ['Baz', 0, 2, 6],
        ['Bat', 1, 2, 4]
    ]);

    var view = new google.visualization.DataView(data);
    // duplicate 1 column as a dummy data series, and add intervals to it
    view.setColumns([0, 1, {
        id: 'min',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 1);
        }
    }, {
        id: 'avg',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 2);
        }
    }, {
        id: 'max',
        type: 'number',
        role: 'interval',
        calc: function (dt, row) {
            return dt.getValue(row, 3);
        }
    }, 1, 2, 3]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        lineWidth: 0,
        intervals: {
            style: 'boxes'
        },
        legend: {
            position: 'none'
        },
        series: {
            0: {
                // dummy data series, controls color of intervals
                visibleInLegend: false,
                color: 'blue',
                enableInteractivity: false
            },
            1: {
                // min series options
            },
            2: {
                // average series options
            },
            3: {
                // max series options
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

参见工作示例：http://jsfiddle.net/asgallant/pvJpx/

Answer 2

如果你关心的是它在视觉上的外观，你可以通过一点点重新创建它，看起来像这样：

sample chart

这是代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['label', 'filler', 'bot half', 'top half'],
    ['A', 3, 2, 2],
    ['B', 2, 4, 1],
    ['C', 4, 1, 3],
    ['D', 5, 1, 1],
    ['E', 1, 4, 4],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
    width: 600,
    isStacked: true,
    series: [{color:'transparent'},{color:'silver'},{color:'silver'}],
    vAxis: {gridlines: {color: 'transparent'}, textPosition: 'none'},
    focusTarget: 'category',
  });
}

这是一种愚蠢的解决方法，但以下是给出min值，max值和avg值的步骤：

创建一个等于min
为条形图的下半部分创建第二个系列，等于avg - min
为条形图的上半部分创建第三个系列，等于max - avg

虽然看起来正确，但问题是与图表的互动真的很时髦，因为它不会向你展示你对图表的期望（你会分开未显示最小值，最大值和平均值的值，但上面的点2）和3）的大小只有两个值。您可以通过创造性地使用focusTarget来解决这个问题，但这仍然会让您感到奇怪：

On Mouseover

现在理论上你可以重命名你的系列，并使用{v:, f:}技巧使它看起来更好，这可能是一个很好的解决方法，但它是非常kludgy取决于你的应用程序。如果你把它完美地做好，你会得到这样的东西：

Revised Mouseover

使用以下代码完成：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Series Name');
  data.addColumn('number', 'Average');
  data.addColumn('number', 'Minimum');
  data.addColumn('number', 'Maximum');
  data.addRows([
    ['A', {v:3, f:'5'}, {v:2, f:'3'}, {v:2, f:'7'}],
    ['B', {v:2, f:'6'}, {v:4, f:'2'}, {v:1, f:'7'}],
    ['C', {v:4, f:'5'}, {v:1, f:'4'}, {v:3, f:'8'}],
    ['D', {v:5, f:'6'}, {v:1, f:'5'}, {v:1, f:'8'}],
    ['E', {v:1, f:'5'}, {v:4, f:'1'}, {v:4, f:'9'}],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
    width: 600,
    isStacked: true,
    series: [{color:'transparent'},{color:'silver'},{color:'silver'}],
    vAxis: {gridlines: {color: 'transparent'}, textPosition: 'none'},
    focusTarget: 'category',
  });
}

再次，这是kludgy并不完美（请参阅填充系列周围的灰色框，这是无法帮助的），但它会显示信息，并且可以使用一些花哨的javascript和/或格式化程序自动化数据视图取决于需要更改图表的频率以及获取数据的格式。

谷歌图表浮动最小/最大/平均柱形图

2 个答案: