Question

好吧，我正在尝试创建高价图表......但是当我尝试渲染图表时，日期值是错误的！你可以看到，我的第一次约会是2012-11-7（yyyy-MM-dd）......我的最后一次约会是2012-12-7。但是当图表呈现时，日期范围介于2012-12-7 2013-01-7之间......我真的不知道为什么......

$(function () {
        Highcharts.setOptions({
            credits: {
                enabled: false
            },
            //0000fe
            colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
            lang: {
                loading: 'Aguarde...',
                months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                exportButtonTitle: "Exportar",
                printButtonTitle: "Imprimir",
                rangeSelectorFrom: "De",
                rangeSelectorTo: "Até",
                rangeSelectorZoom: "Período",
                downloadPNG: 'Download imagem PNG',
                downloadJPEG: 'Download imagem JPEG',
                downloadPDF: 'Download documento PDF',
                downloadSVG: 'Download imagem SVG'
            }  , global: {
             useUTC: true
             }
        });
        // Create the chart
        $('#container').highcharts('StockChart', {

            rangeSelector: {

                enabled: false
            },

            navigator: {
                enabled: false
            },
            title: {
                text: ''
            },
            legend: {
                enabled: true,
                align: 'center',
                backgroundColor: '#FCFFC5',
                borderColor: 'black',
                borderWidth: 1,
                layout: 'vertical',
                verticalAlign: 'top',
                y: 0,
                shadow: true
            },
            yAxis: {
                title: {
                    text: 'Valores'
                },
                max: 5.86,
                min: 4.83,
                showEmpty: true,
                plotLines: [{
                    value: 5.86, // val_superior
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Limite superior'
                    },
                    zIndex: 99
                }, {
                    value: 4.83, // val_inferior
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Limite inferior'
                    },
                    zIndex: 99
                }]
            },
            series: [{name: 'Água Bruta - pH', data: [ [Date.UTC(2012,11,7,9,20,0),5.19],[Date.UTC(2012,11,7,10,20),5.17],[Date.UTC(2012,11,7,11,20),5.07],[Date.UTC(2012,11,7,13,20),5.19],[Date.UTC(2012,11,7,14,20),5.29],[Date.UTC(2012,11,7,17,20),5.19],[Date.UTC(2012,11,8,8,30),5.45],[Date.UTC(2012,11,8,9,30),5.34],[Date.UTC(2012,11,8,10,30),5.19],[Date.UTC(2012,11,8,13,0),5.09],[Date.UTC(2012,11,8,14,30),5.14],[Date.UTC(2012,11,8,16,0),5.10],[Date.UTC(2012,11,9,8,30),5.22],[Date.UTC(2012,11,9,9,30),5.18],[Date.UTC(2012,11,9,10,30),5.22],[Date.UTC(2012,11,9,11,30),5.29],[Date.UTC(2012,11,9,13,20),5.11],[Date.UTC(2012,11,9,14,20),5.06],[Date.UTC(2012,11,9,16,20),5.15],[Date.UTC(2012,11,10,8,30),5.55],[Date.UTC(2012,11,10,9,30),5.34],[Date.UTC(2012,11,10,10,30),5.54],[Date.UTC(2012,11,10,11,30),5.49],[Date.UTC(2012,11,12,8,30),5.34],[Date.UTC(2012,11,12,9,30),5.35],[Date.UTC(2012,11,12,10,30),5.10],[Date.UTC(2012,11,12,11,30),5.09],[Date.UTC(2012,11,12,13,20),5.47],[Date.UTC(2012,11,12,14,20),5.41],[Date.UTC(2012,11,12,15,30),5.38],[Date.UTC(2012,11,12,16,30),5.42],[Date.UTC(2012,11,13,8,50),5.09],[Date.UTC(2012,11,13,14,20),5.11],[Date.UTC(2012,11,13,15,20),5.21],[Date.UTC(2012,11,13,16,20),5.19],[Date.UTC(2012,11,14,8,30),5.38],[Date.UTC(2012,11,14,9,30),5.14],[Date.UTC(2012,11,14,12,20),5.12],[Date.UTC(2012,11,14,15,45),5.09],[Date.UTC(2012,11,14,17,30),5.11],[Date.UTC(2012,11,16,9,30),5.16],[Date.UTC(2012,11,16,10,50),5.10],[Date.UTC(2012,11,16,12,40),5.12],[Date.UTC(2012,11,16,14,20),5.09],[Date.UTC(2012,11,16,15,20),5.21],[Date.UTC(2012,11,16,16,30),5.03],[Date.UTC(2012,11,17,8,30),4.88],[Date.UTC(2012,11,17,9,30),4.99],[Date.UTC(2012,11,17,10,30),5.01],[Date.UTC(2012,11,17,11,30),5.01],[Date.UTC(2012,11,19,8,50),5.50],[Date.UTC(2012,11,19,9,50),5.01],[Date.UTC(2012,11,19,10,50),4.98],[Date.UTC(2012,11,19,11,50),5.02],[Date.UTC(2012,11,19,13,30),5.10],[Date.UTC(2012,11,19,14,30),5.03],[Date.UTC(2012,11,19,16,30),5.62],[Date.UTC(2012,11,20,8,20),5.59],[Date.UTC(2012,11,20,8,30),5.31],[Date.UTC(2012,11,20,10,0),5.57],[Date.UTC(2012,11,20,14,30),5.20],[Date.UTC(2012,11,20,15,30),5.18],[Date.UTC(2012,11,20,16,30),5.21],[Date.UTC(2012,11,21,8,20),5.57],[Date.UTC(2012,11,21,11,0),5.42],[Date.UTC(2012,11,21,11,50),4.98],[Date.UTC(2012,11,21,13,20),5.01],[Date.UTC(2012,11,21,16,20),5.21],[Date.UTC(2012,11,22,9,30),5.44],[Date.UTC(2012,11,22,10,40),5.11],[Date.UTC(2012,11,22,11,40),5.09],[Date.UTC(2012,11,22,13,30),5.21],[Date.UTC(2012,11,22,15,40),5.31],[Date.UTC(2012,11,22,16,40),5.29],[Date.UTC(2012,11,23,8,30),5.32],[Date.UTC(2012,11,23,9,50),5.41],[Date.UTC(2012,11,23,10,40),5.86],[Date.UTC(2012,11,23,11,40),5.66],[Date.UTC(2012,11,23,13,10),5.56],[Date.UTC(2012,11,23,16,10),5.38],[Date.UTC(2012,11,24,8,30),5.10],[Date.UTC(2012,11,24,9,30),5.19],[Date.UTC(2012,11,24,10,30),5.20],[Date.UTC(2012,11,26,10,30),5.24],[Date.UTC(2012,11,26,11,30),5.14],[Date.UTC(2012,11,26,11,30),5.31],[Date.UTC(2012,11,26,13,20),5.36],[Date.UTC(2012,11,26,14,30),5.19],[Date.UTC(2012,11,26,15,30),5.30],[Date.UTC(2012,11,26,16,30),5.10],[Date.UTC(2012,11,27,8,30),5.00],[Date.UTC(2012,11,27,9,30),5.17],[Date.UTC(2012,11,27,10,30),5.18],[Date.UTC(2012,11,27,11,30),5.12],[Date.UTC(2012,11,27,13,20),5.21],[Date.UTC(2012,11,27,14,20),5.12],[Date.UTC(2012,11,27,15,30),5.19],[Date.UTC(2012,11,27,16,30),5.22],[Date.UTC(2012,11,28,8,40),5.12],[Date.UTC(2012,11,28,9,40),5.32],[Date.UTC(2012,11,28,10,40),5.28],[Date.UTC(2012,11,28,11,40),5.55],[Date.UTC(2012,11,28,13,20),5.34],[Date.UTC(2012,11,28,17,0),5.73],[Date.UTC(2012,11,29,8,30),4.83],[Date.UTC(2012,11,29,9,30),5.13],[Date.UTC(2012,11,29,10,40),5.10],[Date.UTC(2012,11,29,11,40),5.12],[Date.UTC(2012,11,29,13,40),4.99],[Date.UTC(2012,11,29,14,30),5.10],[Date.UTC(2012,11,30,8,40),4.83],[Date.UTC(2012,11,30,9,40),5.01],[Date.UTC(2012,11,30,10,40),4.91],[Date.UTC(2012,11,30,11,40),5.10],[Date.UTC(2012,11,30,13,20),5.11],[Date.UTC(2012,11,30,16,20),4.99],[Date.UTC(2012,12,1,8,30),5.49],[Date.UTC(2012,12,1,9,30),5.10],[Date.UTC(2012,12,1,10,30),5.01],[Date.UTC(2012,12,1,11,30),5.05],[Date.UTC(2012,12,3,8,30),5.19],[Date.UTC(2012,12,3,9,30),5.66],[Date.UTC(2012,12,3,11,30),5.59],[Date.UTC(2012,12,3,13,30),5.40],[Date.UTC(2012,12,3,14,30),5.38],[Date.UTC(2012,12,3,15,30),5.20],[Date.UTC(2012,12,3,16,30),5.18],[Date.UTC(2012,12,4,10,0),5.19],[Date.UTC(2012,12,4,15,0),5.40],[Date.UTC(2012,12,4,17,0),5.33],[Date.UTC(2012,12,5,8,30),5.30],[Date.UTC(2012,12,5,9,30),5.25],[Date.UTC(2012,12,5,10,30),5.10],[Date.UTC(2012,12,5,11,30),5.09],[Date.UTC(2012,12,5,13,30),5.01],[Date.UTC(2012,12,6,8,30),5.19],[Date.UTC(2012,12,6,9,6),5.19],[Date.UTC(2012,12,6,9,30),5.25],[Date.UTC(2012,12,6,10,1),5.25],[Date.UTC(2012,12,6,10,30),5.01],[Date.UTC(2012,12,6,10,56),5.01],[Date.UTC(2012,12,6,11,30),5.05],[Date.UTC(2012,12,6,11,48),5.05],[Date.UTC(2012,12,7,8,30),5.09],[Date.UTC(2012,12,7,8,57),5.09],[Date.UTC(2012,12,7,9,30),5.11],[Date.UTC(2012,12,7,9,55),5.11],[Date.UTC(2012,12,7,10,30),5.15],[Date.UTC(2012,12,7,10,43),5.15],[Date.UTC(2012,12,7,11,30),5.21],[Date.UTC(2012,12,7,11,52),5.21],[Date.UTC(2012,12,7,13,30),5.33],[Date.UTC(2012,12,7,14,30),5.20],[Date.UTC(2012,12,7,15,6),5.20],[Date.UTC(2012,12,7,15,30),5.21],[Date.UTC(2012,12,7,15,56),5.21],[Date.UTC(2012,12,7,16,30),5.19],], type: 'spline', tooltip: { valueDecimals: 2}},]

        });

    });

这里有实例：http://jsfiddle.net/5fp70oev/1/

Answer 1

在javascript中使用日期时，这是一个常见错误。我们习惯于将数月视为数字（例如1月=== 1，7月=== 7，12月=== 12），很难切换到零指数系统（例如1月=== 0），7月=== 6月，12月=== 11）。尝试在浏览器的控制台中粘贴它：

(new Date()).getMonth();

本月是1月，控制台应该打印出0，这是基于零的系统中的第一个月。

您的系统正在使用索引为0-11 Jan-Dez的数组，因此您必须使用shortMonths[0] Jan，shortMonths[10] Nov shortMonths[11]来访问它们。 {1}} Dez等等......

您可以做一些事情。一种方法是从data中每个日期的月份值中减去一个。你可能应该首先做到这一点。

此外，更复杂但更快的修复，你可以在数组的开头粘贴一个空白项（''），将Jan-Dez的索引偏移1：

shortMonths: ['', 'Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']

JSFiddle Here。干杯！

渲染Highstock日期时出错

1 个答案: