使用 Kendo Dataviz Vertical Bullet Graph，如何添加类似于 Bar Graph 的标签？答案

【问题标题】：Using Kendo Dataviz Vertical Bullet Graph, How to add labels similar to Bar Graph?使用 Kendo Dataviz Vertical Bullet Graph，如何添加类似于 Bar Graph 的标签？
【发布时间】：2014-01-21 09:07:08
【问题描述】：

尝试设计子弹图的样式，使其完全符合市场营销的需求。所需的图表如下所示：

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

我尝试从剑道文档中设置标签属性：

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript kendo-ui kendo-mobile kendo-dataviz bullet-chart

【解决方案1】：

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

【讨论】：

这是一个很好的建议，但是我在移动应用程序上使用它，鼠标悬停在移动设备上效果不佳。
@Rodney 您可以从鼠标悬停的代码中获取代码，并使其在没有事件的情况下默认显示。
你在 jsfiddle 中有这样的例子吗？

【解决方案2】：

您尝试做的事情是可能的。我在 Try Kendo UI 网站上创建了一个示例：http://trykendoui.telerik.com/@jbristowe/aDIf/7

【讨论】：

我认为这实际上是一个普通的条形图，而不是子弹图...尝试使用特定于子弹的功能，比如画一条线，你会发现问题。

【解决方案3】：

回顾一下，子弹图不支持您需要的那种类型的标签，而条形图也不支持您需要的视觉效果（图表上的特殊线条）。

您可以切换回条形图并编写自定义视觉效果。但是，更简单的方法是在值轴上使用 plotband：https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands

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

如果你制作一个非常窄的频带，它会很好用。它不会像您的参考图像中那样被点缀，它会在条形图的后面，这可能是一个问题...要更深入，您需要一个自定义视觉效果，它会参与：https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual

【讨论】：