劍道圖表數據標籤格式化

Question

我正在使用劍道圖表。我需要以下面的格式顯示各個堆積條形圖的值。請查找下面的圖片和JSfiddle網址以供參考。 Sample Code

$("#chart").kendoChart({ 
        legend: { 
         visible: false 
        }, 
        seriesDefaults: { 
         type: "bar", 
         stack: true 
        }, 
        series: [{ 
         name: "AA", 
         data: [10, 10, 10, 10, 10], 
         color: "#32CD32", 

        }, { 
         name: "BB", 
         data: [30, 10, 10, 10, 45], 
         color: "#0000FF", 
        }], 
        valueAxis: { 
         max: 180, 
         line: { 
          visible: false 
         }, 
         minorGridLines: { 
          visible: true 
         }, 
         labels: { 
          rotation: "auto", 
          visible: true 
         } 
        }, 
        categoryAxis: { 
         categories: ['A', 'B', 'C', 'D', 'E'], 
         majorGridLines: { 
          visible: false 
         } 
        }, 
        chartArea: { 
         width: 500, 
         height: 255 
        }, 
        tooltip: { 
         visible: true, 
         template: "#= series.name #: #= value #" 
        } 
       }); 

預計輸出

Answer 1

您可以使用數據綁定和標籤模板。綁定到：

var data = [ 
    {"Category": "A", "AA": 10, "BB": 30}, 
    {"Category": "B", "AA": 10, "BB": 10}, 
    {"Category": "C", "AA": 10, "BB": 10}, 
    {"Category": "D", "AA": 10, "BB": 10}, 
    {"Category": "E", "AA": 10, "BB": 45} 
]; 

$("#chart").kendoChart({ 
       legend: { 
        visible: false 
       }, 
       dataSource: { 
        data: data 
       } , 
       seriesDefaults: { 
        type: "bar", 
        stack: true 
       }, 
       series: [{ 
        name: "AA", 
        field: "AA", 
        color: "#32CD32", 
       }, { 
        name: "BB", 
        field: "BB", 
        color: "#0000FF", 
        labels:{ 
         visible: true, 
         template: "#: dataItem.AA # (#: dataItem.BB #)" 
        } 
       }], 
       valueAxis: { 
        max: 180, 
        line: { 
         visible: false 
        }, 
        minorGridLines: { 
         visible: true 
        }, 
        labels: { 
         rotation: "auto", 
         visible: true 
        } 
       }, 
       categoryAxis: { 
        field: "Category", 
        majorGridLines: { 
         visible: false 
        } 
       }, 
       chartArea: { 
        width: 500, 
        height: 255 
       }, 
       tooltip: { 
        visible: true, 
        template: "#= series.name #: #= value #" 
       } 
      }); 

DEMO