javascript - 如何格式化值数组以形成 google-charts 直方图的分布?

标签 javascript d3.js charts google-visualization histogram

我有 1000 个值,没有特定的顺序,但我想将它们格式化为正态分布,以便使用 google-charts 在直方图上绘制。

我尝试过使用 d3.js,我只是根据一些例子让它工作,但它看起来非常丑陋,我没有足够的时间来学习 d3 来获得我想要的结果。 Google 图表视觉格式很棒。

问题是 google-charts 需要一种格式的数据,其中每个值都有一个名称和标题。所以当我把它组织成这样时:

'dsSample1': [
    ['price', 'number'],
    ['price', 11386.057139142767],
    ['price', 27659.397260273952],
    ['price', 44159.39726027395],
    ...

来自

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    28026.04112639835,
    ...

谷歌图表有效,但我得到以下信息:

enter image description here

这与我在 d3 中的工作非常接近:https://jsfiddle.net/0jtrq17x/1/ .它有效,但非常丑陋。

我已经设法使用一些 d3 代码将数组数据安排到 bins 中,但它与 google-charts 不兼容,我不知道如何使其兼容,也不知道如何格式化数据所以它与 google-charts 直方图配合得很好

这段代码

var values = this.hypo.dsSample2.map(x => {
    return x + 128608.42487322348
})
var max = d3.max(values)
var min = d3.min(values)
var x = d3.scale.linear()
    .domain([min, max])
    .range([0, 800]);
var histGenerator = d3.layout.histogram()
    .bins(x.ticks(100))
    (values)
this.data1 = histGenerator

返回这个数组转换

enter image description here

我的问题是我不知道如何处理我的数据数组,这样我才能在 google-charts 中得到这样的结果:

enter image description here

最佳答案

有两个data formats对于谷歌图表版本。
一个单一的系列格式,带有名称,
或多系列格式,只有数字。
可以将多系列格式与单个系列一起使用。

因此,不需要指定名称。
但是您必须将每个值转换为它自己的数组。

'dsSample1': [
    [11386.057139142767],
    [27659.397260273952],
    [44159.39726027395],
    ...

来自

'dsSample2': [
    11386.057139142767,
    27659.397260273952,
    44159.39726027395,
    ...  

您可以使用map 方法来格式化数据。

dsSample.map(function (value) {
  return [value];
});

请看下面的 fiddle ...

https://jsfiddle.net/x684f1vs/

关于javascript - 如何格式化值数组以形成 google-charts 直方图的分布?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57262538/

相关文章:

javascript - 来自外部 json 文件的 D3js 条形图

javascript - d3 : Elements move when scale() transform is applied

javascript - 为什么我的 d3.js 图像出现在错误的位置?

javascript - 在 jqplot 中,tick 是什么意思?

JavaFX 图表轴标签格式

javascript - 使用 iOS 发送 ack SocketIO

javascript - 使用Javascript获取Web元素的名称

javascript - 如何设置箭头方向?

javascript - Highcharts : How to update Plotoptions pointStart on Ajax call?

javascript - 剑道网格 : how add a KendoColorPicker in a column