Question

X轴标签在MVC4条形图中重叠。任何想法来解决它。提前谢谢。

@(Html.Kendo().Chart<McAfee.CBRMS.CodeAnalysisReport.BL.Utility.ModuleViewModel>()
        .Name("StaticAnalysisOverAllBarGraph")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetStaticAnalysisOverAllBarGraph", "Home",new { filepath = ViewData["filePath"], jobId = ViewData["jobId"]}))
        )
      .Series(series => {
          series.Column(model => model.CriticalErrors).Name("Critical Errors").Color("DarkRed");

      series.Column(model => model.Errors).Name("Errors").Color("Red");
      series.Column(model => model.CriticalWarning).Name("Critical Warning").Color("Orange");
      series.Column(model => model.Warning).Name("Warnings").Color("Yellow");
    })
     .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Rotation(5)
            .Format("{0}")
        )
    )
    .CategoryAxis(axis => axis
        .Categories(model => model.Name)
        )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
    )
    )

Answer 1

categoryAxis：{ 标签：{rotation：-45}，

这会有帮助吗？改变程度以防止重叠。您还可以使标签不可见（，可见：false）并改为提供工具提示

Answer 2

试试这个例子，

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors Stats /thousands/"
            },
            legend: {
                visible: true
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            }, {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: {
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            },
            categoryAxis: {
                labels: {
                    background: "green",
                    color: "white",
                    visible:true
                },
                categories: ["Janasdfasdfasdfasdfsadfasdf", "Febasdfasdfasdfasdfjhkhsadf", "Marasdfasdfasdfasdfasdfasdf", "Apr", "May", "Jun"],
                crosshair: {
                    tooltip: {
                        padding: {
                            right: 20,
                            left: 20
                        },
                        background: "green",
                        visible: true
                    },
                    visible: true
                },
                majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(createChart);
</script>

Html查看

<div id="chart">
</div>

将crosshair用于标签tooltip。我不知道如何破坏150个字符的标签，但如果你在visible:false labels tooltip，那么你的标签只显示在{{1}}

Kendo UI DataViz条形图x轴标签重叠

2 个答案: