Question

我正在使用谷歌图表的堆积条形图。我做了很多自定义来实现我的功能。 1.每个条形图内的值必须在中心 2.每个内部值的总和应该在每个柱的末尾

请查看我的Google图表示例

<pre><html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    var wrapper;
    function drawVisualization() {

        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'department');
        data.addColumn('number', 'Draft');
        data.addColumn('number', 'InProgress');
        data.addColumn('number', 'Completed');

        data.addRows([
            ['IT', {v:18, f:'18%'}, {v:40, f:'40%'}, {v:42, f:'42%'}],
            ['Administrative', {v:40, f:'40%'}, {v:30, f:'30%'}, {v:30, f:'30%'}],
            ['Sales', {v:35, f:'35%'}, {v:10, f:'10%'}, {v:55, f:'55%'}],
            ['Sales', {v:15.5, f:'15.5%'}, {v:65, f:'65%'}, {v:19.5, f:'19.5%'}]
            /*
            ['Administrative', 40, 30, 30],
            ['Sale', 35, 10, 55],
            ['Accounts', 10, 80, 10]
            */
        ]); 


        //wrapper for graph
        wrapper = new google.visualization.BarChart(document.getElementById('visualization'));

        //attach event listeners
        google.visualization.events.addListener(wrapper, 'select', onSelectHandler);

        /*
        var formatter = new google.visualization.NumberFormat(
          {negativeColor: 'red', suffix : "%"});
        formatter.format(data, 2);
        */

        //add view for data
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 
                        1, {
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation"
                        }, 2, {
                            calc: "stringify",
                            sourceColumn: 2,
                            type: "string",
                            role: "annotation"
                        }, 3, {
                            calc: "stringify",
                            sourceColumn: 3,
                            type: "string",
                            role: "annotation",
                        }
                        ]);

        //set options for graph
        var options = {
            title:"Objective status report",
            isStacked: true,

            width:1000, height:400,
            vAxis: {title: ""},
            hAxis: {title: ""},

            //hide tool tip
            'tooltip' : {
              trigger: 'none'
            },


            hAxis: {
                viewWindow: {
                    min: 0,
                    max: 100
                },
                ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'},
                        {v:40, f:'40%'}, {v:50, f:'50%'}, {v:60, f:'60%'}, {v:70, f:'70%'},
                        {v:80, f:'80%'}, {v:90, f:'90%'}, {v:100, f:'100%'}]

            },

            //set colour for series
            series: [{color: '#F66E25', visibleInLegend: true}, { color : '#2579F6', visibleInLegend: true}, {color: '#9946F7', visibleInLegend: true}]
        };      

        //draw graph
        wrapper.draw(view, options);


        function onSelectHandler(){
            alert("hi there");
        }


    }

    google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawVisualization);

    </script>
  </head>
  <body>
    <div id="visualization"></div>
  </body>
</html></pre>

谷歌图表额外的自定义

0 个答案: