剑道条形图 - 顶部的系列标签？

Posted 2023-05-07

【中文标题】剑道条形图 - 顶部的系列标签？

【英文标题】：Kendo bar chart- series labels at the top?

【发布时间】：2014-07-22 17:09:35

【问题描述】：

如何更改剑道条形图-系列标签的定位？ 考虑以下小提琴：http://jsfiddle.net/ZPUr4/149/

在图表中，对于正值，条形值位于顶部，对于负值，条形值位于底部。

如何将系列标签值定位在正负值的条形顶部？

即使条形值不同，如何将所有标签值放在同一水平线上？

如果我的问题不清楚，请告诉我。

以下是 html 代码：

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

JS代码：

function createChart() 
        $("#chart").kendoChart(
            title: 
                text: "Site Visitors"
            ,
            legend: 
                position: "bottom"
            ,
            seriesDefaults: 
                type: "column",
                labels: 
                    visible: true,
                    background: "transparent",

                
            ,
            series: [
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            , 
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            ],
            valueAxis: 
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: 
                    visible: false
                ,
                title: 
                    text: "Availability"
                ,

                color: 'blue'
            ,
            categoryAxis: 
               color: "blue",
                width: 25,
                majorGridLines: 
                    visible: true,
                    position: "bottom"
                ,
                line: 
                    width: 3,
                
            ,
            tooltip: 
                visible: true,
                format: "0"
            
        );
    

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

    $(document).ready(function () 
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    );

谢谢。

【参考方案1】：

为了指定值在顶部，您应该使用：

labels: 
    visible: true,
    position: "top"

但是有了这个，你就可以将数字放在里面栏了。为了将其移出，您需要：

labels: 
    visible: true,
    position: "top",
    padding: 
        top: -20
    

添加 padding.top 将其放置 20pix 就足够了。

您的 JSFiddle 在此处修改：http://jsfiddle.net/OnaBai/ZPUr4/178/

【讨论】：

感谢您的回答。但是我可以让所有的值在同一行对齐吗？他们现在处于不同的水平。

是的，不是开箱即用，但所有值可以在同一水平线上对齐在框的顶部吗？

我不这么认为（我不知道怎么做）。这不是 HTML 而是 SVG。这些值是 SVG 中的 text 节点，但这些不是唯一的 text 节点。所以像$("text").attr("y", "200") 这样的东西不仅会移动值，还会移动轴上的标签。因此，我看不到如何仅标记这些节点以仅更改它们的位置。

剑道图上可以有任何叠加层来显示标签值吗？

是的，您可以设置叠加层，但您如何知道在该叠加层上正确放置标签的内容和位置。不确定这是否对您来说是必须的，如果是等着看其他人是否会回答您如何操作，但我建议您使用您所拥有的并节省时间进行复杂的开发。

【参考方案2】：

有点晚了，但也许对你或其他人仍然有用。

我正在对我的网格进行相当多的自定义样式，以下允许我将标签放在图表顶部的同一行。

function chartBound(e) 
    var chartData = e.sender;
    var oldPrivateRedraw = chartData._redraw;
    if (oldPrivateRedraw.toString().indexOf('Extend') == -1)  //not already extended
        //Extends kendos function so we can do custom styling to svg components etc
        chartData._redraw = function () 
            oldPrivateRedraw.apply(chartData);
            PostGraphDrawEvents();
        ;
    

function PostGraphDrawEvents() 
    // Move the labels to the top of the graph
    $.each($('#@chartId svg > g > text[style*="11px"]'), function (index, node) 
        var clonedNode = node.cloneNode(true);
        $(clonedNode).attr('y', 10);
        $(node).before(clonedNode);
    );

【参考方案3】：

标题 -------- 将以等宽字体显示。前四个空格 将被剥离，但所有其他空白将被保留。

Markdown and HTML are turned off in code blocks:
<i>This is not italic</i>, and [this is not a link](http://example.com)

要创建不是块，而是内联代码跨度，请使用反引号：

$ 字符只是window.jQuery 的快捷方式。 如果你想在列表中有一个预先格式化的块，缩进八个空格：

这是普通文本。

原来是这样，但现在跟在代码块后面：

Skip a line and indent eight spaces.
That's four spaces for the list
and four to trigger the code block.