Jquery 剑道ui图表图例与图表重叠

Jquery 剑道ui图表图例与图表重叠,jquery,jquery-mobile,kendo-ui,kendo-chart,kendo-dataviz,Jquery,Jquery Mobile,Kendo Ui,Kendo Chart,Kendo Dataviz,我有一个kendo ui datawiz(图表)组件,我在移动设备中使用它,当有大量数据时,我无法完全显示购物车。图例似乎与图表重叠。下面是我正在使用的代码。是否有任何配置需要更改,以便图例不会与图表重叠 $("#chart").kendoChart({ title: { text: applicationData.selectedKPI.descr, colo

我有一个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");

您只需在图表图例中添加一些旋转即可。不必将图例显示为水平线,您可以将它们移动到某个角度,如320。您需要使用的代码片段就是向labels对象添加以下属性,如下所示:

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

您只需在图表图例中添加一些旋转即可。不必将图例显示为水平线,您可以将它们移动到某个角度,如320。您需要使用的代码片段就是向labels对象添加以下属性,如下所示:

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

在MVC模式下,您可以使用:

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

在MVC模式下,您可以使用:

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

你的图表修好了吗?我也有同样的问题。我曾经遇到过这个问题,我提出的解决方案是实施图表钻取。当单击某个区域时,我通常会获取与该区域相关的数据并刷新图表。您是否修复了图表?我也有同样的问题。我曾经遇到过这个问题,我提出的解决方案是实施图表钻孔。当单击某个区域时,我通常会获取与该区域相关的数据并刷新图表。