kendo mvc中的多级图表

Question

我正在尝试在剑道中生成多维图表。

我有这样的数据表

我试图生成类似这样的东西..

而不是“产品”，它应该替换为“年份列2010 ... 2014 ...”

而不是“预算”应该是“国籍---巴林，非巴林”

而不是“实际”它应该来“扇区---公共，私人，其他等”

而不是“新专栏”应该是“性别---男性，女性”

Answer 1

可以使用 visual function 和一些反复试验来实现标签：

visual: function (e) {

    var draw = kendo.drawing;
    var geom = kendo.geometry;
    var Rect = geom.Rect;
    var Path = draw.Path;

    var rect = new Rect([e.rect.origin.x, e.rect.origin.y ], [e.rect.size.width, 50]);
    var pathA = Path.fromRect(rect).stroke("#555", 1, 0.75);

    var p1 = new geom.Point(e.rect.origin.x + e.rect.size.width / 2, e.rect.origin.y + 30);
    var pLeft = new geom.Point(e.rect.origin.x + e.rect.size.width / 6, e.rect.origin.y + 4);
    var pMid = new geom.Point(e.rect.origin.x + e.rect.size.width / 2, e.rect.origin.y + 4);
    var pRight = new geom.Point(e.rect.origin.x + e.rect.size.width * 5 / 6, e.rect.origin.y + 4);
    var text = new kendo.drawing.Text(e.value, p1, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textLeft = new kendo.drawing.Text("Nationality", pLeft, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textMid = new kendo.drawing.Text("Sector", pMid, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });
    var textRight = new kendo.drawing.Text("Gender", pRight, {
      fill: {color:  "rgba(100,100,100,0.999)",}
    });


    var group = new draw.Group();
    group.append(pathA);
    group.append(text); 
    group.append(textLeft); 
    group.append(textMid); 
    group.append(textRight); 

    return group;       
}

然后在 render event 中使用唯一文本颜色将svg文本元素锚点设置为中间，以便更好地居中。

render: function(e){
  $('[fill="rgba(100,100,100,0.999)"]').attr("text-anchor", "middle");
},

的 DEMO

Answer 2

最后很多努力，我找到了解决方案

jsbin working example

 $("#chart").kendoChart({
  seriesDefaults: {
    type: "column"
  },
  series: [{
    name: "Sales",
    data: [10, 20, 0.5, 0, 100, 0]
  }],
  valueAxis: [{
    majorGridLines: { visible: false },
    title: { text: "Sales" },
    axisCrossingValue: [0,0]
  }],
  categoryAxis: [{
    categories: ["Order", "Invoice", "Credit Memo", "Order", "Invoice", "Credit Memo"],
    majorGridLines: { visible: false }
  },
                 {
    categories: ["Item", "Resources"],
    line: { visible: true },
    majorGridLines: { visible: true },
    title: { text: "Type & Document Type" }
  }
                ]
});