Question

我有这个图表，见下文。数据只是垃圾，但显示了问题。超过圈数的国家的Axis标签。有没有办法旋转它们？有点像example

是的我知道我可以缩短或缩短名称，但这种做法会失败。

我尝试了堆叠图表但是左边距太小而无法显示文字。

非常感谢任何帮助

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1" ></asp:ScriptManager>
    <ajaxToolkit:PieChart ID="PieChart1" runat="server" ChartWidth="500px" ChartHeight="400px" ></ajaxToolkit:PieChart><br />
    <ajaxToolkit:BarChart ID="BarChart1" runat="server"    Width="1000px" ChartHeight="400px" ></ajaxToolkit:BarChart>

    <ajaxtoolkit:barchart id="BarChart2" runat="server"
                                chartheight="300"       chartwidth="450"
                                charttype="Column" charttitle="Sample chart title"
                                categoriesaxis="United Kingdom,United States,Australia,New Zealand,United Arab Emirates,Switzerland"
                                charttitlecolor="#0E426C" categoryaxislinecolor="#D08AD9"
                                valueaxislinecolor="#D08AD9" baselinecolor="#A156AB">
           <Series>
                     <ajaxToolkit:BarChartSeries Name="United States" BarColor="#6C1E83"
                                                               Data="110, 189, 255, 95, 107, 140" />

           </Series>
</ajaxtoolkit:barchart>

Answer 1

您可以手动旋转此文本标签。像这样：

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!-- some barchart code here -->
<script>
    $(function() {
        var barChartID= "<%= BarChart1.ClientID %>";

        var $svg = $("#" + barChartID).find("svg"); // SVG BarChart element
        var $series = $svg.find("text[id=SeriesAxis]"); // labels to rotate

        $series.each(function(index, element) {
            var $element = $(element);

            // we need to remove x and y attributes and add translation
            // so we can rotate the element correctly
            var x = $element.attr("x");
            var y = +$element.attr("y") + 10;

            $element.removeAttr("x");
            $element.removeAttr("y");
            $element.attr("transform", "translate(" + x + ", " + y + ") rotate(-45)");
        });
    });
</script>

Ajax Control Toolkit垂直标签

1 个答案: