如何使用Google Chart API创建直方图? [英] How does one go about creating an Histogram using the google chart api?

问题描述

除了使用柱形图并适当命名之外，是否可以在Google Chart API中创建直方图?

Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?

推荐答案

Google图表没有直方图，因为它只是一个可视化库，您必须修改

Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:

您可以控制柱形图中各列之间的间距吗?

Can you control the spacing between columns in a Column Chart?

否，目前不行.请参见 Google图表社区

No, not at this time. See this quote from the Google Charts Community

API中不支持控制条之间的间距.如果您愿意深入研究图表的SVG，则可以破解它.

There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.

因此它是可行的，但需要您多做一些工作.您还可以尝试使用 chartArea 配置选项，这会对列间距产生一些影响.

So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.

但是，原始问题实际上可能有不同的答案.

However, the original question may have a different answer actually.

您可以使用柱形图创建类似直方图的图吗?

Can you create a histogram-like chart using a Column Chart?

虽然您无法控制柱形图中的组列之间的间距，但可以通过将它们指定为不同的列来使几乎彼此压紧，然后在配置选项中将每列的颜色设置为相同的颜色.

While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.

这是一个简单的三栏直方图:

Here is a simple 3-column histogram:

var data = google.visualization.arrayToDataTable([
    ['x', '1-10', '11-20', '21-30'],
    ['', 3, 5, 4]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"My Histogram",
            width:600, height:400,
            hAxis: {title: null},
            colors: ['red','red','red'],
            legend: {position: 'none'}
           }
      );

请注意，您有1行，每行3列，分别为彩色'red'.不利的一面是，您会失去沿x轴显示的标签，告诉您哪一列代表什么.同样，您将必须具有某种逻辑来构造此直方图，并以所需的方式填充数据.

Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.

长话短说，就是Google图表没有直方图，并且虽然有柱形图是可能，但您可以考虑使用其他库.

So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.

这篇关于如何使用Google Chart API创建直方图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！