相关疑难解决方法(0)

我见过其他支持分组条形图的javascript图表库,如下图所示.我没有在chart.js的在线编辑器中看到这是一个明确的选项.

是否可以在chart.js中进行此类分组条形图？这简单吗？在他们的在线编辑器中是否有模板？

图库中的大多数示例都是从TSV文件加载数据.

如何转换以下内容以使用本地json变量而不是TSV数据？

d3.tsv("data.tsv", function(error, data) {

    var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
    data.forEach(function(d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    ...

    svg.selectAll(".bar")
        .data(data)     // <----- bind to myEntities instead
}

据我所知,我只需要对我的entitiesJson做一些事情,以便对数据进行数据处理,以便图表可以绑定到它.

UPDATE

我正在取得一些进展.我从JSON插入了我的实体,图形开始呈现出新的形状.

目前以下代码中断:

svg.selectAll(".bar")
    .data(myEntities)  // <-- this is an array of objects
    .enter().append("rect")

这导致:

错误:属性y ="NaN"的值无效

错误:属性height ="NaN"的值无效

有一种方法可以为y轴创建两个标签.但是如何在chart.js中创建多个x轴标签？例如:如下图所示: 如何分组(两级)轴标签

首先对不起,如果我的英语难以理解,我会尽我所能......

我是D3.js的新手,我正在尝试使用嵌套数据创建D3分组条形图.我已经看过这里分享的一些解决方案,但它们只显示了一级分组.就我而言,数据将来自具有此数据结构的csv文件:

groups,categories,value 1,value 2,value 3
group 1,A,61.0158803,25.903359,13.08076071
group 1,B,71.27703826,21.0180133,7.70494844
group 1,C,82.70203982,13.52731445,3.770645737
group 2,A,58.85721523,28.25939061,12.88339417
group 2,B,71.39695487,20.66010982,7.942935308
group 2,C,82.22389321,13.68924542,4.08686137

该图表有两个x轴,一个用于组(级别0),一个用于类别(级别1).值1到3将显示为每个catergory的分组条形,类别将显示在相应的组.

图表的结构应为:

value 1 | value 2 | value 3 | value 1 | value 2 | value 3 | value 1 | value 2 | value 3 |
|        category A         |          category B         |          category C         |
|                                       group 1                                         |

和第2组相同,放置连续.

问题在于我正在处理的代码,我得到了正确的轴,但是在每个组区域中显示了对应于两个组的数据,一个在另一个的顶部.我无法将类别上的数据链接到其对应的组中,以便在相应的位置绘制它们.

这是我到目前为止的代码:

var x0 = d3.scale.ordinal()
  .rangeRoundBands([0,width], 0);

var x1 = d3.scale.ordinal()
.rangeRoundBands([0,width]);

var x2 = d3.scale.ordinal();

var …