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

时间:2014-09-11 10:51:02

标签: javascript jquery kendo-ui

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

但我有些担心如果有任何机构可以提供帮助。

  1. 我不希望低压数据条和高压数据条之间存在间隙
  2. 如何在工具提示模板中一起显示系列和y轴数据的值
  3. 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"
    }
    

    我的代码工作正常..

    谢谢!

1 个答案:

答案 0 :(得分:6)

要避免空格,请在系列

中使用“spacing”参数
series: [{
        spacing: 0,
}]

显示工具提示中的类别值使用此#= category#

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

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

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

希望这会有所帮助。