Question

尝试将子弹图设置为与市场营销需求完全一致。所需的图形如下所示：

enter image description here

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

我尝试过设置Kendo文档中的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");

非常感谢任何帮助。

Answer 1

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

Answer 2

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

Answer 3

回顾一下，项目符号图表不支持您所需的标签类型，而条形图则不支持所需的外观（图表上的特殊线）。

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

I would expect that when task2 has finished the task1 is already running (and in fact it is) but when checking its status it's WaitingForActivation.. 1 second later, though, its status is RanToCompletion. Please find below output log:

[0:] 20.08.2019 15:18:54 Task 1 started (Id=1)
[0:] 20.08.2019 15:18:54 Task 2 started (Id=2)
[0:] 20.08.2019 15:19:02 - First action finished (Id=2,Status=RanToCompletion). Task1 status=WaitingForActivation, Task2 status=RanToCompletion
[0:] 20.08.2019 15:19:04 'JDE_Scan' - . Task1 status=RanToCompletion, Task2 status=RanToCompletion

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

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

3 个答案: