javascript - 使用Kendo Bullet Graph如何将目标线更改为虚线?

标签 javascript kendo-ui kendo-mobile kendo-dataviz

营销部门已经传递了所需的图表外观和感觉,而无需询问 Dataviz 的功能。我是剑道子弹图类型“verticalBullet”。有没有办法将目标线更改为虚线?

我尝试设置 dashType = "dot"

这是我正在尝试的脚本,但不起作用:

        $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,
                        }
                    }
                    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");

任何帮助将不胜感激。

最佳答案

您可以使用目标的边框:

  target: {
    color: "transparent",
    border: {
      width: 2,
      dashType: "dot",
      color: "#444"
    },
    line: {
      width: 0
    }
  }

这是一个现场演示:http://jsbin.com/AreqameT/1/edit

关于javascript - 使用Kendo Bullet Graph如何将目标线更改为虚线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20907769/

相关文章:

javascript - 遍历 N 级 child

javascript - while 循环中的提示作为密码输入有多安全?

telerik - 响应式 Kendo UI 网格示例

javascript - Firebase存储添加文件引用到firestore

javascript - 在文本中定位具有嵌入外部值的 java 脚本元素

kendo-ui - Kendo UI 网格(内联编辑)更新和取消不起作用

javascript - 剑道编辑器具有最大化和最小化控制?

javascript - 剑斗 : Get tab name when click on tab in kendoui

javascript - Kendo UI-数据显示问题

asp.net-mvc - Kendo Mobile 与 jQuery Mobile 设计