剑道 ui 图表图例与图表重叠答案

【问题标题】：kendo ui chart legends overlapping with chart剑道 ui 图表图例与图表重叠
【发布时间】：2013-04-23 10:18:36
【问题描述】：

我有一个 kendo ui datawiz(chart) 组件，我在移动设备中使用它，当有大量数据时，我无法完全显示购物车。图例似乎与图表重叠。下面是我正在使用的代码..是否有任何配置需要更改，以便图例不与图表重叠..

$("#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");

【问题讨论】：

你修好你的图表了吗？我也有同样的问题。
我遇到过这个问题，我想出的解决方案是实现图表钻取。当点击某个区域时，我曾经获取与该区域相关的数据并刷新图表。跨度>

标签： jquery jquery-mobile kendo-ui kendo-chart kendo-dataviz

【解决方案1】：

您可以在图表图例中添加一些旋转。无需将图例显示为水平线，您可以将它们移动到某个角度，例如 320。您需要使用的代码只是将以下属性添加到标签对象，如下所示：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：