Kendo UI jquery折线图X轴标签问题

xbp102n0  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(169)

我正在使用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') #)"
                    }
                });
            }

我需要有关此问题的帮助。

hyrbngr7

hyrbngr71#

但在生产中(发布后)则显示所有的X轴标签、
您确定您的变更已部署吗?生产中似乎有更多数据,因此可能会打乱您的步骤。
无论如何,也许您需要使您的步骤“智能”。我们计算初始步骤,以便标签不重叠。当图表放大或缩小时,我们重新计算步骤并重新绘制图表。这里需要注意的一点是,我们需要为分类轴命名,以便我们可以获得最小和最大轴范围。
下面是一个smart step example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo Chart Smart Step Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="chart"></div>
    <script>
        // Sample data
        var data = [];
        for (var i = 0; i < 100; i++) {
            var val = Math.round(Math.random() * 10);
            data.push({
                category: "Category " + i,
                value: val
            });
        }

        function createChart() {
            var step = 1;

            if (data.length > 10) {
                step = Math.floor(data.length / 10);
            }

            $("#chart").kendoChart({
                transitions: false,
                dataSource: {
                    data: data
                },
                categoryAxis: {
                    name: "categoryAxis",
                    labels: {
                        step: step,
                    }
                },
                series: [{
                    type: "column",
                    field: "value",
                    categoryField: "category"
                }],
                pannable: {
                    lock: "y"
                },
                zoomable: {
                    mousewheel: {
                        lock: "y"
                    },
                    selection: {
                        lock: "y"
                    }
                },
                zoomEnd: function (e) {
                    var axisMin = e.sender.options.categoryAxis.min;
                    var axisMax = e.sender.options.categoryAxis.max;

                    var step = 1;
                    var length = axisMax - axisMin;
                    if (length > 10) {
                        step = Math.ceil(length / 10);
                    }

                    e.sender.options.categoryAxis.labels.step = step;
                    e.sender.redraw();
                },
            });
        }

        $(document).ready(createChart);
    </script>
</body>

</html>

相关问题