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

kendo ui chart legends与图表重叠

2 个答案: