0

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}")
    )
    )
4

2 回答 2

2

categoryAxis：{标签：{旋转：-45}，

这会有帮助吗？改变度数以防止重叠。您还可以使标签不可见 (,visible:false) 并提供工具提示

于 2015-01-10T16:01:04.000 回答
0

试试这个例子，

<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

于 2013-08-23T12:30:47.660 回答