在kendo dataviz区域图表中指定主要网格线之间的步骤

时间:2012-11-12 22:38:02

标签: kendo-ui kendo-dataviz

我创建了一个区域图表,说明了一天内许多媒体播放器的状态。

我希望每小时都有一个主要的网格线,每半个小时就有一个小网格线。 我看不到你可以在哪里设置网格线的“步骤”。

以下是我目前正在设置的方式:

$("#chart").kendoChart({
    theme: "blueOpal",
    title: {
        visible:false
    },
    chartArea: {
        height: 800
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "area",
        stack: true
    },
    series: [],
    valueAxis: {
        labels: {
            format: "{0}",
            visible: true
        }
    },
    categoryAxis: {
        categories: [],
        labels: {
            visible: true,
            step:60
        },
        minorGridLines: {
            visible: false
        },
        majorGridLines: {
            visible: true,
        },
        majorTicks: {
            visible: false,
            size: 2
        }
    },
    tooltip: {
        visible: true,
        format: "{0}"
    },
    seriesColors: [
            '#336699',
            '#EBAD60',
            '#FF0000',
            '#9582BB',
            '#028482'
    ]
});

它看起来像这样。这个缩小的图像显示实际显示的网格线较少,但是这个图像仍然表明有太多的线条它们停止服务。

enter image description here

1 个答案:

答案 0 :(得分:3)

我在Telerik论坛上发布了同样的问题:

http://www.kendoui.com/forums/dataviz/chart/specify-the-step-between-major-gridlines-in-a-datetime-series.aspx#2378855

答案是:您无法在Kendo UI DataViz中设置网格线步骤。

希望我有理由在2013年回来更新这个答案。


稍后修改

最后, 在2014年版的Kendo UI中,您可以指定垂直网格线的频率。这由配置属性categoryAxis.majorGridLines.stepcategoryAxis.minorGridLines.step

完成
    categoryAxis: {
        categories: [],
        labels: {
            visible: true,
            step: 60
        },
        minorGridLines: {
            visible: true,
            step: 30
        },
        majorGridLines: {
            visible: true,
            step: 60
        },
        majorTicks: {
            visible: false,
            size: 2
        }
    },