Проблемы с гистограммой jqPlot

Ответ 1

От того, как вы хотите, чтобы ваш сюжет выглядел, вы сэкономите массу неприятностей, если переключитесь на использование CategoryAxisRenderer вместо DateAxisRenderer. CategoryAxisRenderer намного лучше отображает скрытые группировки данных, а не истинные временные ряды.

var axisDates = ["Jan 19", "Jan 20", "Jan 21"]
var chartData = [2.61,5.00,6.00]

        $.jqplot.config.enablePlugins = true;
             var plot2 = $.jqplot('chart2', [chartData], {
                title: 'Some Plot',
                 seriesDefaults:{
                     renderer: $.jqplot.BarRenderer,
                     rendererOptions: {
                        barPadding: 1,
                        barMargin: 15,
                        barDirection: 'vertical',
                        barWidth: 50
                    }, 
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {                            
                            renderer:  $.jqplot.CategoryAxisRenderer,
                            ticks: axisDates
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: '$%.2f'
                        }
                    }
                },
                highlighter: {
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: true
                }
            });

Ответ 2

DateAxisRenderer действительно предназначен для линейных графиков, а не для гистограмм. Когда вы объединяете его с гистограммами, это просто не работает правильно. Идея/цель DateAxisRenderer заключается в создании линейного/точного графика времени по дате/времени. Таким образом, если вы пропустите запись даты, она по-прежнему будет масштабироваться с течением времени. Проверьте их примеры на DateAxisRenderer здесь: http://www.jqplot.com/tests/date-axes.php

То, что вы хотите использовать, - это CategoryAxisRenderer. Затем вы можете просто переопределить/создать собственный рендеринг метки меток и быть хорошим. Обычно вы не хотите добавлять лишние элементы к элементу, особенно если они пусты, однако, если вы это сделаете, просто добавьте их в свой массив данных.

Здесь jsfiddle делает то, что вы хотите: http://jsfiddle.net/fordlover49/JWhmQ/

Обратите внимание, что вы можете посмотреть раздел управления ресурсами, чтобы проверить, какие файлы вам нужно ссылаться (в дополнение к файлу jquery).

Здесь javascript в случае jsfiddle действует вверх:

$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];

// add a custom tick formatter, so that you don't have to include the entire date renderer library.
$.jqplot.DateTickFormatter = function(format, val) {
    // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
    val = (new Date(val)).getTime();
    format = '%b&nbsp%#d'
    return $.jsDate.strftime(val, format);
};

function PlotChart(chartData, extraDays) {
    // if you want extra days, just append them to your chartData array.
    if (typeof extraDays === "number") {
        for (var i = 0; i < extraDays; i++) {
            var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date
            var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date
            chartData.push([newDate, 0]);
        }
    }

    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 1,
                barWidth: 50
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                pad: 1,
                // a factor multiplied by the data range on the axis to give the            
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%b %#d',
                    formatter: $.jqplot.DateTickFormatter
                }
            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);

Ответ 3

Вот простой хак, который я использовал для отображения поля.

Я создаю дату начала и дату окончания, которые являются соответственно за один день до и через один день после содержимого, которое я хочу показать.

Например, если я хочу показать январь 2012 года

var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012

Затем я объявляю свой собственный DateTickFormatter, где я не буду печатать эти две даты.

$.jqplot.DateTickFormatter = function(format, val) {
        if (!format) {
            format = '%Y/%m/%d';
        }

        if(val==startingDate.getTime() || val==endingDate.getTime()){
            return "";
        }else{
            return $.jsDate.strftime(val, format);
        }
    };

Затем в xaxis поставьте следующие параметры:

xaxis : {
      renderer:$.jqplot.DateAxisRenderer, 
      min:startingDate,
      max:endingDate,
      tickInterval:'1 day'
}