7

ブレット グラフをマーケティングの要望どおりにスタイルアップしようとしています。目的のグラフは次のようになります。

ここに画像の説明を入力

バーの上部にラベルを追加するにはどうすればよいですか?

Kendo Documentation から labels プロパティを設定しようとしました:

 labels:
 {
visible: true,
format: "{0}",
font: "14px Arial",
 },

動作していないスクリプトは次のとおりです。

        $barChart = $("#bar-chart").empty();

         $barChart.kendoChart({
            theme: global.app.chartsTheme,
            renderAs: "svg",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [
                {   
                    type: "verticalBullet",
                    currentField: "score",
                    targetField: "average",
                    target: {
                        color: "#444",
                        dashType: "dot",
                        line: {
                          width: 1,
                        }
                    },
                    labels:
                    {
                        visible: true,
                        format: "{0}",
                        font: "14px Arial",
                    },
                    data: [
                       {
                            score: 93.7,
                            average: 65.2,                              
                        }, {
                            score: 80.2,
                            average: 22.2,
                        }, {
                            score: 60.8,
                            average: 35.2,
                        }, {

                            score: 82.1,
                            average: 45.2,                                
                        }, {
                            score: 74.2,
                            average: 55.2,
                        }
                    ]
                }
            ],
            categoryAxis: {
                labels: { rotation: -45 },
                categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
                line: {
                    visible: false
                },
                color: "#444", 
                axisCrossingValue: [0, 0, 100, 100]
            },
             tooltip: {
                visible: false
            }
        }).data("kendoChart");

どんな助けでも大歓迎です。

4

3 に答える 3