1

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

2 回答 2

1

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

legend: {
    visible: true,
    position: "bottom",
    offsetX: 20,
    offsetY: 15,
    labels: {
        //font: "9px Arial,Helvetica,sans-serif"
    }
}
于 2014-08-11T11:26:05.090 回答
0

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

.Legend(legend => legend
.Position(ChartLegendPosition.Bottom).Labels(x => x.Font(font: "9px Arial,Helvetica,sans-serif")
)
)
于 2015-06-04T20:47:03.010 回答