如何在Google图表中创建自定义hAxis标签?

ail

我将Google Charts用于简单的Area Chart。我要绘制许多点,我想设置它们之间的间隔。目前有清单1,2,3,4,5,6,7

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

代码是:

<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>

结果是:

在此处输入图片说明

水平标签代表所有点,我需要所有这些点,但显示特定的水平标签。如何设置特定间隔?

谢谢

向往

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

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]
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Google图表中设置hAxis标签日期的格式

来自分类Dev

如何在图表中自定义样式数据标签?

来自分类Dev

如何在Java Web App中创建自定义标签?如何在JSP中使用自定义标签?

来自分类Dev

如何在Java Web App中创建自定义标签?如何在JSP中使用自定义标签?

来自分类Dev

如何在vb.net中的图表上的数据点上放置自定义标签?

来自分类Dev

如何在AWS Mobile Analytics中创建自定义图表跟踪指标?

来自分类Dev

如何在Google图表中设置hAxis文本的数量?

来自分类Dev

如何在图表中设置自定义填充颜色

来自分类Dev

如何在Jodit中创建自定义按钮以将文本包装在代码标签中?

来自分类Dev

如何在Excel 2013中的图表Y轴自定义标签中插入换行符?

来自分类Dev

如何自定义 Google 图表直方图

来自分类Dev

如何在ckeditor中定义自定义html标签

来自分类Dev

如何在Android Studio中创建自定义JavaDoc标签?

来自分类Dev

如何在Salesforce托管包中创建自定义标签图标

来自分类Dev

如何在Salesforce托管包中创建自定义标签图标

来自分类Dev

如何在Google Map API中的自定义图标图像上显示标签

来自分类Dev

如何在scriptlet中访问自定义标签的属性?

来自分类Dev

如何在networkx中自定义边缘标签的显示?

来自分类Dev

如何在cfImport中引用自定义标签路径?

来自分类Dev

如何在Wordpress中自定义标签?

来自分类Dev

如何在PyYaml中添加自定义嵌套标签?

来自分类Dev

如何在SVG标签中自定义PNG图像?

来自分类Dev

如何在ZK中自定义组件标签

来自分类Dev

如何创建自定义SELinux标签

来自分类Dev

如何创建自定义[QUOTE]标签?

来自分类Dev

如何在自定义tableviewcelll中设置标签的自定义字体?

来自分类Dev

如何给图表控件的x轴赋予自定义标签?

来自分类Dev

如何为图表自定义标签配置图像

来自分类Dev

在Plotly中为图表注释添加自定义标签

Related 相关文章

  1. 1

    如何在Google图表中设置hAxis标签日期的格式

  2. 2

    如何在图表中自定义样式数据标签?

  3. 3

    如何在Java Web App中创建自定义标签?如何在JSP中使用自定义标签?

  4. 4

    如何在Java Web App中创建自定义标签?如何在JSP中使用自定义标签?

  5. 5

    如何在vb.net中的图表上的数据点上放置自定义标签?

  6. 6

    如何在AWS Mobile Analytics中创建自定义图表跟踪指标?

  7. 7

    如何在Google图表中设置hAxis文本的数量?

  8. 8

    如何在图表中设置自定义填充颜色

  9. 9

    如何在Jodit中创建自定义按钮以将文本包装在代码标签中?

  10. 10

    如何在Excel 2013中的图表Y轴自定义标签中插入换行符?

  11. 11

    如何自定义 Google 图表直方图

  12. 12

    如何在ckeditor中定义自定义html标签

  13. 13

    如何在Android Studio中创建自定义JavaDoc标签?

  14. 14

    如何在Salesforce托管包中创建自定义标签图标

  15. 15

    如何在Salesforce托管包中创建自定义标签图标

  16. 16

    如何在Google Map API中的自定义图标图像上显示标签

  17. 17

    如何在scriptlet中访问自定义标签的属性?

  18. 18

    如何在networkx中自定义边缘标签的显示?

  19. 19

    如何在cfImport中引用自定义标签路径?

  20. 20

    如何在Wordpress中自定义标签?

  21. 21

    如何在PyYaml中添加自定义嵌套标签?

  22. 22

    如何在SVG标签中自定义PNG图像?

  23. 23

    如何在ZK中自定义组件标签

  24. 24

    如何创建自定义SELinux标签

  25. 25

    如何创建自定义[QUOTE]标签?

  26. 26

    如何在自定义tableviewcelll中设置标签的自定义字体?

  27. 27

    如何给图表控件的x轴赋予自定义标签?

  28. 28

    如何为图表自定义标签配置图像

  29. 29

    在Plotly中为图表注释添加自定义标签

热门标签

归档