kendo mvc 中的多级图表

Question

我正在尝试在 kendo..

中生成多维图表

我有这样的数据表

我正在尝试生成类似这样的内容..

而不是 "Product" 它应该替换为 "Year column 2010...2014..."

而不是"Budget"应该是"Nationality --- Bahraini, Non Bahraini"

而不是"Actual"应该是"Sector --- Public,Private, Other etc"

而不是"New Column"应该是"Gender --- Male,Female"

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" }
  }
                ]
});

kendo mvc 中的多级图表

kendo Multi level chart in mvc

kendo-ui

kendo-asp.net-mvc

kendo-chart

DEMO