减少 Ext JS 4 图表下可见标签的数量

发布于 2024-12-11 07:54:48 字数 635 浏览 0 评论 0原文

我正在编写 Ext JS 4 折线图组件。它工作得很好，但是当我在轴下显示标签时，它们太密集了。我不会减少可见标签的数量。怎么做呢？这是我的轴代码：

{
    type: 'Category',
    position: 'bottom',
    fields: ['date'],
    grid: true,
    label: {
        field: 'label',
        rotate: { degrees:315 },
        renderer: function(item) {
            var date = new Date(item);
            /* parseIntToStringWithZeros is a custom method somewhere else */
            var day = parseIntToStringWithZeros(date.getDate());
            var month = parseIntToStringWithZeros(date.getMonth());
            result = day + '-' + month;
            return result;
        }
    }
}

原文

I'm writing Ext JS 4 line chart component. It works all fine, but when I display labels under axis they are just too dense. I won't the number of visible labels to decrease. How to do that? Here's my code for the axis:

{
    type: 'Category',
    position: 'bottom',
    fields: ['date'],
    grid: true,
    label: {
        field: 'label',
        rotate: { degrees:315 },
        renderer: function(item) {
            var date = new Date(item);
            /* parseIntToStringWithZeros is a custom method somewhere else */
            var day = parseIntToStringWithZeros(date.getDate());
            var month = parseIntToStringWithZeros(date.getMonth());
            result = day + '-' + month;
            return result;
        }
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫瑾少女 2024-12-18 07:54:48

我认为您可能需要使用“数字”轴而不是“类别”轴作为开始（不确定您的数据是什么样的，但您可能需要将时间转换为值才能使其正常工作）。

使用数字轴，您应该能够通过在轴配置中设置 steps 属性来设置主要刻度值的数量（网格线和标签出现的位置）；但这并不总是有效。更可靠的方法是重写没有记录的applyData函数，因此您需要搜索开发代码以查看它在做什么。

此外，为了不渲染特定标签，您可以在标签渲染器函数中返回空字符串。例如，如果您只想在上面的代码中显示一个单独的“月份”一次，您可以这样做。

label: {
    ....
    renderer: (function(){
       var lastRenderedMonth = '';
       return function(item){
           ... //your code above without the return..
           if(month == lastRenderedMonth)
              return "";
           lastRenderedMonth = month;
           return result;
       };
    })(),
    ...

I think you might need to use a "Numeric" axis instead of a "Category" axis a start (not sure what your data looks like, but you might need to convert times to values to get it to work).

With the numeric axis you are supposed to be able to set the number of major tick values (where the grid lines and labels appear), by setting the steps property in the axis config; however this doesn't always work. A more surefire way is to override the applyData function which isn't documented so you need to search through the dev code to see what it's doing.

Also, to simply not render a particular label you can just return the empty string in the label renderer function. e.g. if you only want an individual "month" to show up once in the above code you could do something like this..

label: {
    ....
    renderer: (function(){
       var lastRenderedMonth = '';
       return function(item){
           ... //your code above without the return..
           if(month == lastRenderedMonth)
              return "";
           lastRenderedMonth = month;
           return result;
       };
    })(),
    ...

回复收藏 0 原文

~没有更多了~