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

Posted 2023-05-07

【中文标题】使用 Kendo Dataviz Vertical Bullet Graph，如何添加类似于 Bar Graph 的标签？

【英文标题】：Using Kendo Dataviz Vertical Bullet Graph, How to add labels similar to 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");

任何帮助将不胜感激。

【参考方案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