Javascript 使用Kendo Dataviz垂直项目符号图，如何添加类似于条形图的标签？

试图将项目符号图设计成完全符合市场需求的样式。所需的图形如下所示：

如何在条形图顶部添加标签

我已尝试从剑道文档中设置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");

---

任何帮助都将不胜感激

因为这不是一个受支持的功能，所以任何尝试这样做的本质上都是一种黑客行为。我看了一下剑道演示，注意到有一个tooltip元素具有类k-tooltip，其中包含鼠标悬停时一个条的总数。您应该查看鼠标上方的鼠标，以显示总数。

您尝试执行的操作是可能的。我在我们的Try Kendo UI网站上创建了一个示例：

概括一下，子弹形图表不支持您需要的标签类型，条形图不支持您需要的视觉效果（图表上的特殊线条）

您可以切换回条形图并编写自定义的视觉效果。但是，更简单的方法是在值轴上使用plotband：

$（“#图表”）。肯多卡特({
valueAxis：{
绘图带：[
{从：1到：2，颜色：“红色”}
]
},
系列：[
{数据：[1,2,3]}
]
});

---

如果你做一个很窄的波段，它会工作得很好。它不会像你的参考图片那样点着，它会在吧台后面，这可能是个问题。。。要深入了解，您需要一个自定义的视觉效果，它将涉及到：

这是一个很好的建议，但是，我在移动应用程序上使用此选项，鼠标悬停在移动应用程序上效果不太好。@Rodney您可以通过鼠标悬停获取代码，并使其默认显示而不显示事件。您在JSFIDLE中有这样的示例吗？我想这实际上是一个普通的条形图，而不是项目符号图。。。尝试使用特定于项目符号的功能，例如画一条线，您将看到问题所在。

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  valueAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>