剑道条形图 - 在条形顶部添加文本答案

【问题标题】：kendo bar chart- add text at the top of the bar剑道条形图 - 在条形顶部添加文本
【发布时间】：2014-06-05 08:47:03
【问题描述】：

可以在条形图中每个条形的顶部显示一些文本吗？我需要显示除条形值之外的一些文本。

目前，每个条形的顶部都会显示条形值。如何在要显示的条形值的同时再添加一个值？

这是 HTML 代码：

<div id="chart1">
</div>
<div id="chart2">
</div>

JS代码：

var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];

$("#chart1").kendoChart({
  series: 
    [
        {
            data: series1,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            spacing: 0
        },                 
        {    
            data: series2, 
            color: "#CCCCCC"    
        }
    ],
    plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300
    },
    categoryAxis: 
    {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#CCCCCC"},
            ],
                },
                seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },

        }, 
    valueAxis:
                { 

            title:
            { 
                text: "A"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            format: "{0}"
        }
});  

        $("#chart2").kendoChart({
  series: 
    [
        {
            data: series3,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            spacing: 0
        },                 
        {    
            data: series4, 
            color: "#CCCCCC"    
        }
    ],
        plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
        height: 300,
    },
    categoryAxis: 
            {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,

            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#333333"},
            ],
        },
    seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },
        }, 
    valueAxis: 
        { 
            title:
            { 
                text: "O"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            format: "{0}"
        }
});

谢谢。

【问题讨论】：

标签： kendo-ui kendo-dataviz

【解决方案1】：

这样试试，

如果我正确理解您的问题，

seriesDefaults: 
{
 type: "column",
  labels: 
   {    
    visible: true,
    color: "red",
    template: "Jaimin: #= value #"
   },

 },

演示：http://jsfiddle.net/An59E/37/

如果有任何问题，请告诉我。

【讨论】：

不，可以在条形网格的顶部添加一些文本吗？喜欢这张图片中的那个：tinypic.com/r/vy4en8/8

【解决方案2】：

试试这个，您只需在工具提示的 FORMAT 部分中附加您的文本

tooltip: {
                visible: true,
                format: "Your Value : {0}"
            }

【讨论】：