HighCharts pointRange trancating width。这是一个HighCharts错误还是我错过了什么?

时间:2013-07-04 20:08:11

标签: javascript highcharts

我有一个HighCharts图表,它结合了样条线和列。列数据定义单个Y值---表示单个列---并使用pointRange指示单个列覆盖的X值范围。只要pointRange小于样条数据中的最大X值,一切都可以正常工作。但是当pointRange大于样条数据中的最大X值时,HighCharts会从根本上截断点范围,例如,从我想要的10,000到大约4200,大约是最大X值的一半。标签也从根本上向左移动,就好像列的X值小于0,这在我传递的数据中是不存在的。

(我想发布问题的快照,但我的声誉不足。)

这是一个HighCharts错误,还是我在这里遗漏了什么?贝叶斯当然会提出后者,但我无法理解我所缺少的东西。因此,这个请求给stackoverflow的神。

这是一个说明我的问题的小提琴:http://jsfiddle.net/Bridgeland/UVF4P/1/如果你将pointRange从10000改为8000,你可以看到我期望的结果,尽管列稍微小一些。

这是我的代码,为简洁省略了大部分数据:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'pointRange is too small'
        },
        yAxis: {
            min: 0,
            max: 1
        },
        xAxis: {
            min: 0
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            data: [
                [0, 1],
                [215, 1],
                // middle of spline data omitted for brevity
                [8189, 0.007198560287942413],
                [8404, 0],
                [8620, 0]
            ],
            type: 'spline',
            marker: {
                enabled: false
            },
            zIndex: 1
        }, {
            data: [0.5],
            type: 'column',
            pointInterval: 10000,
            pointPadding: 0.01,
            groupPadding: 0,
            borderWidth: 0,
            shadow: false,
            pointPlacement: 'between',
            pointRange: 10000,
            zIndex: 0,
            minPointLength: 3,
            dataLabels: {
                enabled: true,
                inside: true,
                color: 'white',
                formatter: function () {
                    return 'Misplaced'
                }
            }
        }]
    })
})

(你可能想知道为什么我有一个单列的柱形图?我的图表通常有更多的列。单列是特定数据组合的病态案例。但尽管有病理学,我仍然会喜欢它可以正常显示。)

2 个答案:

答案 0 :(得分:1)

你不能也设置一个xAxis max,例如10500吗?这不会允许列扩展到10k?

答案 1 :(得分:1)

似乎Highcharts不允许pointRange大于xminRange值的最大值。

您可以通过执行以下操作来解决此问题:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'pointRange is too small'
        },
        yAxis: {
            min: 0,
            max: 1
        },
        xAxis: {
            min: 0,
            minRange: 10000
          //^^^^^^^^^^^
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            data: [
                [0, 1],
                [215, 1],
                // middle of spline data omitted for brevity
                [8189, 0.007198560287942413],
                [8404, 0],
                [8620, 0]
            ],
            type: 'spline',
            marker: {
                enabled: false
            },
            zIndex: 1
        }, {
            data: [0.5],
            type: 'column',
            pointInterval: 10000,
            pointPadding: 0.01,
            groupPadding: 0,
            borderWidth: 0,
            shadow: false,
            pointPlacement: 'between',
            pointRange: 10000,
            zIndex: 0,
            minPointLength: 3,
            dataLabels: {
                enabled: true,
                inside: true,
                color: 'white',
                formatter: function () {
                    return 'Misplaced'
                }
            }
        }]
    })
})

由于您将pointInterval设置为10000,我认为您可以使用minRange值执行相同的操作吗?