我正在使用Kendo UI for jquery v2019.3.1023为我的项目绘制折线图。我使用'step'参数来限制X轴上的标签数量。它在我的本地机器上工作得很好。
但在生产中(发布后)则显示所有的X轴标签、
下面是我用来绘制图表的代码,
function drawPricePerformaceLineChart(data) {
let data0 = data.map(function (x) {
return {
date: new Date(x.Date),
value: x.Performance
};
});
let _steps = Math.floor(data0.length / 8); //************ Steps to show 8 labels
$("div#<%= lineChartPricePerformace.ClientID %>").html(null);
$("div#<%= lineChartPricePerformace.ClientID %>").kendoChart({
dataSource: {
data: data0
},
seriesDefaults: {
type: "line",
style: "smooth",
markers: {
visible: false
},
categoryField: "date",
width: 2
},
series: [{
field: "value",
color: "#0170AD"
}],
categoryAxis: {
type: "date",
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
},
labels: {
visible: true,
step: _steps, //************ Steps
template: "#: kendo.toString(value, 'dd MMMM yyyy') #"
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= kendo.toString(category, 'dd MMMM yyyy') # (#= kendo.toString(value, 'N') #)"
}
});
}
我需要有关此问题的帮助。
1条答案
按热度按时间hyrbngr71#
但在生产中(发布后)则显示所有的X轴标签、
您确定您的变更已部署吗?生产中似乎有更多数据,因此可能会打乱您的步骤。
无论如何,也许您需要使您的步骤“智能”。我们计算初始步骤,以便标签不重叠。当图表放大或缩小时,我们重新计算步骤并重新绘制图表。这里需要注意的一点是,我们需要为分类轴命名,以便我们可以获得最小和最大轴范围。
下面是一个smart step example: