Question

条形图中每个条形的顶部是否可以显示一些文字？我需要一些文本，而不是要显示的条形值。

目前每个栏顶部都显示条形值。如何添加一个值以及要显示的条形值？

以下是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}"
        }
});

感谢。

Answer 1

试试这个，

如果我理解你的问题，

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

 },

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

如果有任何疑虑，请告诉我。

Answer 2

试试这个，你必须在工具提示的格式部分附加你的文字

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

kendo条形图 - 在栏顶部添加文字

2 个答案: