将 Google 可视化折线图 hAxis 原点设置为其初始值

Posted 2023-04-14

【中文标题】将 Google 可视化折线图 hAxis 原点设置为其初始值

【英文标题】：Set Google visualization line chart hAxis origin to its initial value

【发布时间】：2014-04-21 07:40:02

【问题描述】：

这是一个带有 goole 折线图的sample fiddle，图表被绘制为，

 var Xmin = data.getValue(0, 0);

        var options = 
                title : 'Sample graph',
                legend : 
                    position : 'bottom'
                ,
                height : 400,
                interpolateNulls : true,
                'pointSize' : 5,
                'vAxis' : 
                    title : "Count",
                    'minValue' : 0,
                ,
                'hAxis' : 
                    title : "Month",
                    'minValue' : Xmin,
                ,
                'animation' : 
                    'duration' : 1000,
                    'easing' : 'in'
                ,
            ;

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      

如何将 hAxis 原点设置为 Jan-13 而不是 0

【参考方案1】：

如果要将线条拉伸到图表边缘，则需要为域轴使用连续数据类型（number、date、datetime、timeofday）而不是离散数据类型(string) 类型。由于您的数据是月份和年份，您可以使用 date 类型：

function drawChart() 
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        [new Date(2013, 0), 1000, 400],
        [new Date(2013, 1), 1170, 460],
        [new Date(2013, 2), 660, 1120],
        [new Date(2013, 3), 1030, 540]
    ]);

    // get the range of dates
    var range = data.getColumnRange(0);
    // pull back the start just a bit so the first axis label will show
    range.min = new Date(range.min);
    range.min.setMilliseconds(-1);

    // format the dates
    var dateFormatter = new google.visualization.DateFormat(pattern: 'MMM-yy');
    dateFormatter.format(data, 0);

    var options = 
        title : 'Sample graph',
        legend : 
            position : 'bottom'
        ,
        height : 400,
        interpolateNulls : true,
        pointSize : 5,
        vAxis : 
            title : "Count",
            minValue : 0,
        ,
        hAxis : 
            title : "Month",
            format: 'MMM-yy',
            viewWindow: 
                min: range.min,
                max: range.max
            
        ,
        animation : 
            duration : 1000,
            easing : 'in'
        ,
    ;

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

google.load("visualization", "1", packages:["corechart"], callback: drawChart);

参见示例：http://jsfiddle.net/asgallant/k3c9Q/

【讨论】：

如果只有两列，它会在 hAxis 中显示多个标签。例如：jsfiddle.net/k3c9Q/1 如何删除网格线？

那是由轴格式引起的。如果您注释掉格式行，您会看到这些刻度实际上是 1 月份的不同日期。使用更大的数据集，这将不是问题。您可以通过将hAxis.gridlines.color 选项设置为'transparent' 来消除这些线条。在此处查看这两项更改：jsfiddle.net/asgallant/k3c9Q/3

如何将刻度设置为一个月范围。即一月、二月、三月等。

您无法指定要使用的时间间隔，但您可以通过 hAxis.ticks 选项指定单独的刻度线（它采用一组值来放置标签），或者您可以告诉图表通过hAxis.minValue 和hAxis.maxValue 选项为x 轴使用更大的范围。