javascript - 在工具提示模板 kendo UI 中一起显示系列和 y 轴数据的值

标签 javascript jquery kendo-ui

我正在使用 kendo UI 条形图来显示一些数据。 我能够显示柱形图..

但我有些担心是否有人可以提供帮助。

  1. 我不希望低压数据条和高压数据条之间出现间隙
  2. 如何在工具提示模板中同时显示系列值和 y 轴数据

enter image description here

我想要它

enter image description here 请查找附件图片以供引用..

我的代码:

title: {
},
legend: {
    position: "bottom"
},
seriesDefaults: {
    type: "column",
//stack: true
},
series: [{
    name: "# Low Voltage Service Points",
    data: [50, 23, 74, 20, 20, 10],
    color: "#1A5FED",

    // Line chart marker type
    markers: {
        type: "square"
    }
}, {
    name: "# High Voltage Service Points",
    data: [52, 34, 78, 68, 23, 40],
    color: "#ed3024",
}],
valueAxis: {
    line: {
        visible: false
    },
    labels: {
    //format: "{0}%"
    },
    axisCrossingValue: 0
},
categoryAxis: {
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    color: "#ff0000",
    majorGridLines: {
        visible: false
    },
    line: {
        visible: false
    },
    labels: {
        template: "#=categories[value]#"
    },
},
tooltip: {
    visible: true,
    format: "{0}",
    template: "#= series.name #: #= value #, Date"
}

我的代码工作正常..

谢谢!!

最佳答案

为了避免空格,在系列中使用“spacing”参数

series: [{
        spacing: 0,
}]

要在工具提示中显示类别值,请使用此 #= category #

 template: "#= series.name #: #= category # = #= value # "

我已经完成了一个 Jsfidle 示例,因此您可以看到它的实际效果

http://jsfiddle.net/chanaka1/hy7uqu00/2/

希望这对您有所帮助。

关于javascript - 在工具提示模板 kendo UI 中一起显示系列和 y 轴数据的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25785548/

相关文章:

JavaScript 无论如何都可以控制 onclick 事件

javascript - Pinterest 分享 HTML 链接错误

javascript - 使用脚本在窗口中打开链接(Google Sheet)

javascript - 这个模式的名称/目的是什么?

css - Kendo 窗口更改滚动以具有静态更新/取消按钮

javascript - 使用 Angular 在本地绑定(bind) DataViz 图表(条形图)

ajax - Kendo UI DropDownList 服务器过滤

javascript - jQuery-ui 自动完成下拉列表中的两个字段

javascript - Angular 在 View 中使用字符串作为范围属性名称

jquery - 使用 jQuery 将值相加然后触发结果