Диаграмма Google, добавляющая нежелательные интервалы времени - PullRequest
Новая
       24

Диаграмма Google, добавляющая нежелательные интервалы времени

1 голос
/ 18 июня 2019

Я использую линейный график Google, чтобы показать некоторые детали.Ось X представлена ​​в формате DateTime, и ниже приведены данные:

enter image description here

Как видно, есть две даты марта и другие деталис мая.

Полученный линейный график выглядит следующим образом:

enter image description here

на оси X есть дополнительный Apri, поданный так,график идет прямо, и я хочу удалить этот апрель и показать только соответствующие промежутки времени.Есть ли способ удалить или скрыть месяцы, которые не содержат значения?

Мой код: 

function SalesbyDay() {

    $.ajax({
        type: 'POST',
        url: 'ChartDemo.aspx/SalesbyDay',
        dataType: 'json',
        data: '{"pageSession":"' + $("#hdnPageSession").val() + '"}',
        contentType: 'application/json',
        success: function (data) {
            dataValues = data.d;

            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'date');
            data.addColumn('number', 'SalesValue');

            var mindate = eval(dataValues[0].date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
            var maxdate = eval(dataValues[dataValues.length - 1].date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));

            for (var i = 0; i < dataValues.length; i++) {

                var sdate = dataValues[i].date;
                var newDate = eval(sdate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
                data.addRow([
                    newDate,
                    dataValues[i].SalesValue
                ]);
            }

            var chart = new google.visualization.LineChart(document.getElementById('chartdiv2'));
            var options = {
                legend: { position: 'top', alignment: 'start' },
                hAxis: {
                    viewWindow: {
                        min: mindate,
                        max: maxdate
                    },
                    gridlines: {
                        count: -1,
                        units: {
                            days: { format: ['MMM dd'] },
                            hours: { format: ['HH:mm', 'ha'] },
                        }
                    },
                    minorGridlines: {
                        units: {
                            hours: { format: ['hh:mm:ss a', 'ha'] },
                            minutes: { format: ['HH:mm a Z', ':mm'] }
                        }
                    }
                },
            };
            chart.draw(data, options);
        }
    });
}

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 23 июня 2019

мы можем использовать опцию ticks, чтобы показывать только те метки, которые мы хотим видеть.
и мы можем получить уникальный список дат из данных,
с методом таблицы данных -> getDistinctValues

ticks: data.getDistinctValues(0),

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

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
    packages: ['corechart']
}).then(function () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'date');
    data.addColumn('number', 'SalesValue');
    data.addRows([
      [new Date(2019, 2, 5, 0, 31, 44), 500],
      [new Date(2019, 2, 7, 23, 40, 53), 50],
      [new Date(2019, 4, 21, 6, 27, 43), 50],
      [new Date(2019, 4, 22, 1, 47, 42), 50],
      [new Date(2019, 4, 22, 2, 50, 29), 50],
      [new Date(2019, 4, 23, 0, 0, 52), 50],
      [new Date(2019, 4, 23, 0, 15, 42), 50],
      [new Date(2019, 4, 23, 4, 26, 39), 50],
      [new Date(2019, 4, 27, 6, 20, 20), 25],
      [new Date(2019, 4, 27, 6, 20, 49), 100],
      [new Date(2019, 4, 27, 6, 22, 38), 20],
      [new Date(2019, 4, 27, 18, 11, 37), 500],
    ]);

    var dateRange = data.getColumnRange(0);
    var mindate = dateRange.min;
    var maxdate = dateRange.max;

    var chart = new google.visualization.LineChart(document.getElementById('chartdiv2'));
    var options = {
        legend: { position: 'top', alignment: 'start' },
        hAxis: {
            viewWindow: {
                min: mindate,
                max: maxdate
            },
            ticks: data.getDistinctValues(0),
            gridlines: {
                count: -1,
                units: {
                    days: { format: ['MMM dd'] },
                    hours: { format: ['HH:mm', 'ha'] },
                }
            },
            minorGridlines: {
                units: {
                    hours: { format: ['hh:mm:ss a', 'ha'] },
                    minutes: { format: ['HH:mm a Z', ':mm'] }
                }
            }
        },
    };
    chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartdiv2"></div>

мы можем использовать дискретную ось (строку),
отображать только даты в наших данных.

в следующем фрагменте,
DataView с вычисляемым столбцом используется для преобразования даты в строку ... 

google.charts.load('current', {
    packages: ['corechart']
}).then(function () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'date');
    data.addColumn('number', 'SalesValue');
    data.addRows([
      [new Date(2019, 2, 5, 0, 31, 44), 500],
      [new Date(2019, 2, 7, 23, 40, 53), 50],
      [new Date(2019, 4, 21, 6, 27, 43), 50],
      [new Date(2019, 4, 22, 1, 47, 42), 50],
      [new Date(2019, 4, 22, 2, 50, 29), 50],
      [new Date(2019, 4, 23, 0, 0, 52), 50],
      [new Date(2019, 4, 23, 0, 15, 42), 50],
      [new Date(2019, 4, 23, 4, 26, 39), 50],
      [new Date(2019, 4, 27, 6, 20, 20), 25],
      [new Date(2019, 4, 27, 6, 20, 49), 100],
      [new Date(2019, 4, 27, 6, 22, 38), 20],
      [new Date(2019, 4, 27, 18, 11, 37), 500],
    ]);

    var formatDate = new google.visualization.DateFormat({
      pattern: 'MMM dd'
    });
    var formatTime = new google.visualization.DateFormat({
      pattern: 'HH:mm'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        var rowDate1 = formatDate.formatValue(dt.getValue(row, 0));
        var rowDate2 = null;
        if (row > 0) {
          rowDate2 = formatDate.formatValue(dt.getValue(row - 1, 0));
        }
        if (rowDate1 === rowDate2) {
          rowDate1 = formatTime.formatValue(dt.getValue(row - 1, 0));
        }
        return rowDate1;
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }, 1]);

    var dateRange = data.getColumnRange(0);
    var mindate = dateRange.min;
    var maxdate = dateRange.max;

    var chart = new google.visualization.LineChart(document.getElementById('chartdiv2'));
    var options = {
        legend: { position: 'top', alignment: 'start' }
    };
    chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartdiv2"></div>

отметьте вышеупомянутые результаты в равномерно распределенных метках,
не соответствующие промежутки времени .
и исходные параметры, используемые для hAxis, недопустимы для дискретной оси.

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

...