Question

我正在使用Google折线图显示一些详细信息。 x轴为DateTime格式，以下是数据，

如您所见，有两个日期是从三月开始的，其他详细信息是从五月开始的。

结果折线图如下，

在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);
        }
    });
}

请帮助。

Answer 1

我们可以使用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图表完全可以得到想要的东西...

谷歌图表添加不必要的时间间隔

1 个答案: