Question

我正在尝试使用Google Charts制作简单的折线图。

我想在Y轴和Y轴标题上添加$符号，这些只是装饰性更改，而不是轴的比例变化。

我正在使用drawChart()功能来实现这一目标。我对JavaScript并不十分熟悉，而且网上有大量的文档，考虑到你可以使用Google图表的多种方式，这些文档有点令人困惑。

我需要添加以下代码才能获得Y轴值。

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

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Date', 'Spend'],
            ['<? echo $dates[ 7 ] ?>',  1000],
            ['<? echo $dates[ 6 ] ?>',  2000],
            ['<? echo $dates[ 5 ] ?>',  3000],
            ['<? echo $dates[ 4 ] ?>',  1000],
            ['<? echo $dates[ 3 ] ?>',  6000],
            ['<? echo $dates[ 2 ] ?>',  8000],
            ['<? echo $dates[ 1 ] ?>',  5000],
        ]);     

        var options = {
            title: 'Spend over the last 7 days',
            colors: ['#f15a29'],
        };
    }  
</script>

Answer 1

var options = {
      title: 'Spend over the last 7 days',
      hAxis: {title: 'Spend($)', titleTextStyle: {color: 'red'}}
    };

添加hAxes以定义水平轴，使用vAxes定义垂直轴。更多信息请参考.... https://developers.google.com/chart/interactive/docs/gallery

Answer 2

设置vAxis.title选项以设置标题，并设置vAxis.format选项以指定用于轴值的格式：

var options = {
    colors: ['#f15a29'],
    vAxis: {
        title: 'Spend over the last 7 days ($)',
        format: '$#,###' // format 3000 as "$3,000"
    }
}

Answer 3

标记vAxis并更改格式以包含$：

var options = {
    'vAxis': { title: 'Title Here', format:'$#' },
};

格式化输入，以便tooltops反映$：

var formatter = new google.visualization.NumberFormat({
    prefix: '$'
});

formatter.format(data, 1);

谷歌图表 - 标记Y轴

3 个答案: