Question

我有一个图表，显示日期范围内的特定值。我遇到的问题是，有时废物类型会跳过一个月。下面是我正在使用的数组，您可以从数组的“回收”部分看到它从May 14跳转到Jul 14。

Array
(
    [Recycling] => Array
        (
            [May 14] => 7040
            [Jul 14] => 3920
            [Aug 14] => 14560
            [Sep 14] => 15120
            [Oct 14] => 12420
            [Nov 14] => 13440
            [Dec 14] => 13720
            [Jan 15] => 3920
        )

    [Disposal (Landfill)] => Array
        (
            [May 14] => 3800
            [Jun 14] => 7820
            [Jul 14] => 8100
            [Aug 14] => 5520
        )

    [Energy Recovery] => Array
        (
            [May 14] => 340
            [Jun 14] => 8500
            [Jul 14] => 6640
            [Aug 14] => 2860
            [Sep 14] => 7360
            [Oct 14] => 5380
            [Nov 14] => 8380
            [Dec 14] => 5440
            [Jan 15] => 1600
        )

)

图表的X轴显示数据阵列中最低日期到当前日期之间的日期范围，如下所示：

enter image description here

正如您所看到的，回收线（绿色）仍在Jun 14中绘制一个点，即使它没有该月的任何数据。真的应该跳过那个月并转到Jul 14。

如何让图表正常运行？

这是我的代码：

        init.push(function () {
            $('#wh2Chart').highcharts({
                chart: {
                    height:250,
                    animation: {
                        duration: 1500,
                        easing: 'easeOutBounce'
                    },
                },
                title: {
                    text: '',
                },
                xAxis: {
                    categories: [{% for key,value in seldates %}'{{value}}',{% endfor %}]
                    //categories: [{% for key,value in newWHM %}{% for key, v in value %}'{{key}}',{% endfor %}{% endfor %}]
                },
                yAxis: {
                    title: {
                        text: '(tonnes)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: 't'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom',
                    floating: false,
                },
                series: [
                {% for key,value in newWHM %}
                    {% if key == 'Prevention' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#008729'
                        },
                    {% elseif key == 'Reuse' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#86b400'
                        },
                    {% elseif key == 'Recycling' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#3CB400'
                        },
                    {% elseif key == 'Minimisation' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#915b14'
                        },
                    {% elseif key == 'Energy Recovery' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#da7300'
                        },
                    {% elseif key == 'Disposal (Landfill)' %}
                        {
                            name: '{{key}}',
                            data: [{% for key, v in value %}{{v|tonne}},{% endfor %}],
                            color: '#ca000e'
                        },
                    {% endif %}
                {% endfor %}

                ]
            });
        });

此外，有关信息，数据来自Symfony2系统，并在Twig文件中呈现。

Answer 1

问题是您使用了类别，因此所有点都是从第一个值中获取的。如果你有一个字符串，highcharts doens不会重新确定你的起点。所以你需要解决方案

使用datetime类型的xAxis并将您的x值转换为时间戳
操纵特定系列的pointStart

如果X轴不存在，请获取Highcharts图表以跳过日期

1 个答案: