Question

我正在尝试最终确定一个图表，我在一个月内报告每日产量以及其他几个基于日常系列的产品。图表始终设置为满刻度，这意味着我总是显示一个月内的所有日期，即使我没有它们的值，无论其原因是什么。在每个月的第一天，我会将上个月的图表显示为报告。

This is the jfiddle我已经设置好了，你可以有个主意。我一直在反对的问题是，无论我尝试做什么，Highcharts都会忽略我并在x轴上显示错误的标签。因此，从2开始，从整个月到最后，它们以1结束。

这是我的图表的代码：

$(function() {
    var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'tab-month-graph',
                zoomType: 'xy'
            },
            title: {
                text: 'Daily - August 2015'
            },
            xAxis: {
                type: 'datetime',
                tickInterval: 24 * 3600 * 1000,
                labels: {
                    align: 'center',
                    text: 'Giorni',
                    style: {
                        fontSize: '10px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                },
                dateTimeLabelFormats: {
                    day: '%e'
                }
            },
            yAxis: [{ // Primary yAxis
                title: {
                    text: 'Produzione giornaliera',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            },
            { // Secondary yAxis
                title: {
                    text: 'PR giornaliero',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                min: 0,
                startOnTick: false,
                opposite: true
            }],
            legend: {
                enabled: false
            },
            series: [{
                 name: 'Prod.',
                 type: 'column',
                 data: [[1438466230000, 4603.36],[1438552630000, 4264.92],[1438639030000, 3108.05],[1438725430000, 2047.03],[1438811830000, 2270.39],[1438898230000, 2258.2],[1438984630000, 3971.95],[1439071030000, 3784.45],[1439157430000, 3674.53],[1439243830000, 3131.95],[1439330230000, 1963.13],[1439416630000, 3333.52],[1439503030000, 4161.8],[1439589430000, 4408.59],[1439675830000, 2968.83],[1439762230000, 2808.05],[1439848630000, 4439.77],[1439935020000, 3746.48],[1440021430000, 4980],[1440107830000, 3683.91],[1440194230000, 4480.78],[1440280630000, 4406.48],[1440367030000, 4518.98],[1440453430000, 4492.73],[1440539830000, 3924.14],[1440626230000, 4062.89],[1440712630000, 3225.47],[1440799030000, 3213.75],[1440885430000, 4631.95],[1440971830000, 4471.17],[1441058230000, 4223.91]],
                 color: '#89CE7F',
                 dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#000000',
                        align: 'right',
                        x: 4,
                        y: 10,
                        style: {
                            fontSize: '11px',
                            fontFamily: 'Verdana, sans-serif',
                            textShadow: '0 0 3px black'
                            }
                        }
                }, 
                {
                    name: 'PR',
                    type: 'spline',
                    yAxis: 1,
                    lineWidth: 0,
                    marker: {
                        radius: 6
                    },
                    data: [[1438466230000, 73.36],[1438552630000, 75.08],[1438639030000, 57.54],[1438725430000, 38.85],[1438811830000, 39.14],[1438898230000, 63.78],[1438984630000, 76.03],[1439071030000, 75.78],[1439157430000, 77.61],[1439243830000, 79.74],[1439330230000, 77.35],[1439416630000, 73.98],[1439503030000, 75.79]],
                    color: '#AA0000',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                },
                {
                    name: 'PR Cont.',
                    type: 'spline',
                    yAxis: 1,
                    lineWidth: 0,
                    marker: {
                        radius: 5,
                        symbol: 'circle'
                    },
                    data: [[1438466230000, 78.84],[1438552630000, 79.85],[1438639030000, 75.16],[1438725430000, 59.15],[1440971830000, 78.5],[1441058230000, 78.45]],
                    color: '#BBBB00',
                    tooltip: {
                        valueSuffix: ' %'
                    }
                } 
                ],
            tooltip: {
                xDateFormat: '%A, %d %B %Y',
                valueSuffix: ' kW',
                shared: true    //  LEGENDA CONDIVISA
            },
            plotOptions: {
                series: {
                    pointStart: Date.UTC(2015, 7, 1),
                    pointRange: 24 * 3600 * 1000
                }
            }
        });
    });

我已经在Stack Overflow上阅读了大量的帖子，尝试了大量的建议，我甚至试过了this post tinyurl.com/psbzxeh on HighCharts official forum，这引起了类似的问题，但它并没有解决我的问题。有人能指出我正确的解决方案吗？

Answer 1

只是澄清事情：列看起来像是翻译了一天，因为那个时间（21:57:10 UTC） - 几乎是另一天（没有UTC，格林尼治标准时间23:57:10 + 2:00）。一般情况下，如果您有每日数据，那么最好使用00:00:00，因为这是完全按日期开始的时间。操作JSON应该不那么难，请参阅：

function modify(data) {
    var time;
    data.map(function(e) {
        time = new Date(e[0]);
        time.setUTCHours(0);
        time.setUTCMinutes(0);
        time.setUTCSeconds(0);

        e[0] = time.getTime();
        return e; 
    });
    return data;
}

和

   series: [{
        name: 'Prod.',
        type: 'column',
        data: modify([
            [1438466230000, 4603.36],
            ...
        ])
   }]

演示：http://jsfiddle.net/p7vnqmt7/3/

注意：要删除轴上最后一个位置的额外刻度，只需设置xAxis.max。

并回答评论中的问题：不，当您将数据作为x-y对时，不应使用pointInterval。

Answer 2

尝试高于您的高图功能的下方功能并设置xAxis min和max。使用第一个时间戳（日期）作为最小值和最后一个时间戳（日期）作为最大值。

    $( function () {
                            Highcharts.setOptions( {
                                lang : {
                                    rangeSelectorZoom : ' '
                                },
                                global : {
                                    useUTC : false
                                }
                            } );
                        } );

Highcharts混合柱/样条，错误的xaxis标签

2 个答案: