javascript - 如何在 Google 图表中创建自定义轴标签？

Question

我正在使用 Google Charts 绘制简单的面积图。我有很多点要画，我想设置它们之间的间隔。目前有一个列表 1,2,3,4,5,6,7 etc

我想显示所有点，但带有自定义 hAxis 标签，例如:0 5 10 15 20 等

代码是:

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Day', 'Visit', 'Applic.'],
            ['1', 19, 1],
            ['2', 100, 9],
            ['3', 103, 18],
            ['4', 42, 8],
            ['5', 34, 2],
            ['6', 63, 9],
            ['7', 35, 7],
            ['8', 427, 51],
            ['9', 314, 38],
            ['10', 71, 4],
            ['11', 27, 0],
            ['12', 25, 0],
            ['13', 78, 0],
            ['14', 54, 0],
            ['15', 60, 0],
            ['16', 47, 0],
            ['17', 29, 0],
            ['18', 16, 0],
            ['19', 10, 0],
            ['20', 26, 0],
            ['21', 200, 0],
            ['22', 255, 0],
            ['23', 160, 0],
            ['24', 30, 0],
            ['25', 35, 0],
            ['26', 9, 0],
        ]);

        var options = {
            vAxis: {minValue: 0},

            hAxis: {
                title: 'Days',               
            },                        
            pointSize: 8,
            colors: ['#9EC653', '#475825'],
            chartArea: {
                left: 40,
                top: 40,
                width: 600,
                height: 250
            },
            legend: {position: 'top', textStyle: {fontSize: 14}, alignment: 'center'},
            backgroundColor: '#f7f6f4',            
        };

        var chart = new google.visualization.AreaChart(document.getElementById('visits'));
        chart.draw(data, options);
    }
</script>

结果是:

水平标签代表所有点，我需要所有的点，但显示特定的水平标签。如何设置特定的时间间隔？

谢谢

Answer 1

如果您将轴值输入为数字而不是字符串，这将更容易实现:

var data = google.visualization.arrayToDataTable([
    ['Day', 'Visit', 'Applic.'],
    [1, 19, 1],
    [2, 100, 9],
    [3, 103, 18],
    [4, 42, 8],
    [5, 34, 2],
    [6, 63, 9],
    [7, 35, 7],
    [8, 427, 51],
    [9, 314, 38],
    [10, 71, 4],
    [11, 27, 0],
    [12, 25, 0],
    [13, 78, 0],
    [14, 54, 0],
    [15, 60, 0],
    [16, 47, 0],
    [17, 29, 0],
    [18, 16, 0],
    [19, 10, 0],
    [20, 26, 0],
    [21, 200, 0],
    [22, 255, 0],
    [23, 160, 0],
    [24, 30, 0],
    [25, 35, 0],
    [26, 9, 0]
]);

然后您可以指定 hAxis.ticks 选项来告诉图表应该在轴上标记哪些值:

hAxis: {
    title: 'Days',
    ticks: [0, 5, 10, 15, 25]
}