剑道UI图表图例与图表重叠

Question

我有一个kendo UI datawiz(图表)组件，我在移动设备上使用它，当有很多数据时，我有一个问题，完全显示购物车..图例似乎与图表重叠..下面是我使用的代码..是否有任何配置，我需要改变，使图例不与图表重叠..

$("#chart").kendoChart({
                    title: {
                        text: applicationData.selectedKPI.descr,
                        color: '#00337f',
                        font: "bold 16px  Segoe UI,sans-serif"
                    },
                    seriesDefaults: {
                        type: applicationData.selectedKPI.chartType
                    },
                    chartArea: {
                        background: '#c5deca'
                    },
                    legend: {
                        visible: true,
                        position: "bottom",
                        offsetX: 20,
                        offsetY: 15,
                        labels: {
                            //font: "9px Arial,Helvetica,sans-serif"
                        },
                    },
                    dataSource: {
                        data: applicationData.selectedKPI.chartData
                    },
                    series: [{
                        field: "series",
                        startAngle: 40,
                        categoryField: "categories",
                        labels: {
                            visible: true,
                            background: "transparent",
                            //position: "outsideEnd",  
                            //template: "#= value#",
                            format: applicationData.selectedKPI.valAxisFmt,
                            padding: -10,
                            margin: 10
                            //font: "9px Arial,Helvetica,sans-serif"                            
                        }
                    }],
                    categoryAxis: {
                        categories: applicationData.selectedKPI.chartCategories,
                        majorGridLines: {
                            visible: false
                        },
                        labels: {
                            rotation: getCatRot(applicationData.selectedKPI.chartType)
                        }
                    },
                    valueAxis: {
                        labels: {
                            step: 3,
                            rotation: getValRot(applicationData.selectedKPI.chartType),
                            format: applicationData.selectedKPI.valAxisFmt
                        }
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}"
                    }
                }).data("kendoChart");

Answer 1

您可以在图表图例中添加一些旋转。你可以将图例移动到某个角度，比如320，而不是显示在水平线上。您需要使用的代码段，只需将以下属性添加到标签对象中，就像这样:

legend: {
    visible: true,
    position: "bottom",
    offsetX: 20,
    offsetY: 15,
    labels: {
        //font: "9px Arial,Helvetica,sans-serif"
    }
}

Answer 2

在MVC模式下，你可以使用:

.Legend(legend => legend
.Position(ChartLegendPosition.Bottom).Labels(x => x.Font(font: "9px Arial,Helvetica,sans-serif")
)
)