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 に答える