是否可以重新设置Google图表？

Question

我的设计师要求我重新整理Google图表，使其看起来如此：

有没有人有这方面的经验，特别是自定义标签（上限：$ 80k等）以及顶部和底部的阴影？

Answer 1

根据Convert HTML to Plain Text，Google Column Chart似乎不支持自定义注释位置。

但你可以考虑Configuration options section方法：

  

叠加层是放置在Google图表顶部的区域。它通常是   曾经叫出一个特定的统计数据，但可以是你想要的任何东西   因为它只是HTML和CSS。

     

简单的用法包括创建一个CSS类并简单地引用它   你的HTML;不需要JavaScript。

示例

＆＃13;

＆＃13;

google.load('visualization', '1', { packages: ['corechart', 'bar'] });
google.setOnLoadCallback(drawChart);
var chart;

function drawChart() {
    var data = google.visualization.arrayToDataTable([
         ['Offer', 'Amount', { role: 'style' }],
         ['Client Offer', 60000, 'color: #5A9AD6'],
         ['NBCU Offer', 75000, 'color: #7330A5']
    ]);



    var options = {
        title: 'Amount',
        legend: { position: "none" },
        vAxis: {
            minValue: 0,
            maxValue: 80000,
            format: 'currency',
            ticks: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000]
        },
        bar: { groupWidth: 100 }
    };

    var view = new google.visualization.DataView(data);

    //var formatter = new google.visualization.NumberFormat({ prefix: '$' });
    //formatter.format(data, 1);
   
    //view.setColumns([0,1,2,
    //    {
    //        role: "annotation",
    //        type: "string",
    //        calc: function (dt, row) { 
    //            return dt.getFormattedValue(row, 1); 
    //              }
    //    }
    //]);

    chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    chart.draw(view, options);
}

＆＃13;

        #chart {
            width: 100%;
            height: 100%;
            position: relative;
        }

         .chart-container {
             position: absolute;
             width: 640px;
             height: 420px;
         }

        .chart-overlay {
            width: 400px;
            height: 260px;
            position: inherit;
            top: 80px;
            left: 120px;
        }

        .chart-segment-top {
            background: rgba(231, 231, 231, .6);
            height: 100px;
            top: 0px;
            position: relative;
        }

        .chart-segment-bottom {
            background: rgba(255, 219, 222, .6);
            top: 130px;
            bottom: 0px;
            height: 30px;
            position: relative;
        }

        .chart-annotation-client {
            top: 45px;
            left: 65px;
            position: inherit;
            font-family: serif;
            font-size: 14px;
        }

        .chart-annotation-nbcu {
            position: inherit;
            top: 0px;
            left: 265px;
             font-family: serif;
            font-size: 14px;
        }

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart-container">
   <div id="chart"></div>
   <div class="chart-overlay">
       <div class="chart-segment-top"></div>
       <div class="chart-segment-bottom"></div>
       <div class="chart-annotation-client">$60,000.00</div>
       <div class="chart-annotation-nbcu">$75,000.00</div>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;