【问题标题】:Highcharts bar zoom issue when using transparent series使用透明系列时出现 Highcharts 栏缩放问题
【发布时间】:2014-08-11 15:57:35
【问题描述】:

我在使用透明内容时遇到了一种奇怪的Highchart 缩放行为。

很难解释,所以我准备了a quick video to show it

你有遇到过这样的问题吗?

提前致谢!

编辑:JSFiddle

还有代码:

$(function () {

    $('#roadmap-training').highcharts({
        chart: {
            type: 'bar',
            zoomType: 'y'
        },
        yAxis: {
            type: 'datetime',
            min: new Date(2014, 0, 1).getTime(),
            max: new Date(2014, 11, 31).getTime(),
        },
        plotOptions: {
            series: {
                stacking: "normal"
            },
        },
        tooltip: {
            positioner: function () {
                return { x: 10, y: 35 };
            },
        },
        series: [
            {
                data: [
                    {
                        y: 864000000,
                    },
                    {
                        y: 12960000000,
                    }
                ]
            },

            {
                data: [
                    {
                        y: new Date(2014, 1, 1).getTime(),
                        color: 'transparent'
                    },
                    {
                        y: new Date(2014, 8, 1).getTime(),
                        color: 'transparent'
                    }
                ]
            }
        ]
    });
});

这是我以这种方式生成的真实世界示例:

【问题讨论】:

  • 很好的例子。是否可以在 JSFiddle 中获取您的代码以尝试一些解决方案?

标签: javascript jquery charts highcharts bar-chart


【解决方案1】:

使用透明系列的原因是什么?为什么不使用列范围类型?就像这样:http://jsfiddle.net/Fusher/yfz4usw5/

    series: [{
        data: [{
            high: new Date(2014, 1, 1).getTime() + 864000000,
            low: new Date(2014, 1, 1).getTime(),
        }, {
            high: new Date(2014, 8, 1).getTime() + 12960000000,
            low: new Date(2014, 8, 1).getTime(),
        }]
    }]

有时确实会出现问题,但很难猜测是什么原因。

【讨论】:

  • 您好 Pawel,感谢您的回答,看起来很有希望!我需要能够在同一条线上放置多个条形图,以便生成路线图(~甘特图)。您能告诉我如何使用您的技术实现这一目标吗?
  • 完美的帕维尔,就像一个魅力!非常感谢你。该解决方案嵌入在一个 jQuery 插件中:github.com/pascallando/highroadmap
猜你喜欢
  • 1970-01-01
  • 2022-01-01
  • 1970-01-01
  • 2019-02-20
  • 1970-01-01
  • 2020-02-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多