How to move vAxis values in middle of blocks

时间：2017-06-15 09:35:54

标签： javascript charts google-chartwrapper

I have my googleCombot chart here and I want my vAxis (vertical Axis [0,1,2,3,4,5,6]) values to sit in middle on blocks instead of sitting on the lines. how can I achieve it and get my values to sit within range?

This is the result want to achieve google Combo graph

Here is my fiddle

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addColumn('number', 'color band 1');
    data.addColumn('number', 'color band 2');
    data.addColumn('number', 'color band 3');
    data.addColumn('number', 'color band 4');
    data.addColumn('number', 'color band 5');
    
    var vticks = [];
    var weight = [1,3,2,7,4,6];
    var hticks = [];
    var i;
    for(var i = 0; i< weight.length; i++){ 
      hticks.push(i+1);
    }
    var vticksMin = vticks[0];
    var vticksMax = vticks[vticks.length - 1];
    var br = 1, by = 1, ty = 1, tr = 1, mg = 3;
    for (i = 0; i < 7; i++){
      vticks.push(i);
    }
	
    for (var i = 1; i < weight.length+1; i++) {
    
        data.addRow([i, parseInt(weight[i-1]), br, by,mg,ty,tr]);
    }

	var view = new google.visualization.DataView(data);
	view.setColumns([0,1, {
		type: 'string',
		role: 'annotation',
		calc: function (dt, row) {
			return dt.getValue(row, 1).toString();
		}
	}, 2, 3,4, 5,6]);
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    
    chart.draw(view, {
        height: 700,
        width: 900,
        isStacked: true,
        hAxis: {
	            ticks: hticks
        },
        vAxis: {
	            viewWindow: {
	                min: vticksMin,
	                max: vticksMax
	            },
	            ticks: vticks
        },
        series: {
            0: {
                type: 'line',
    			color: '#000'
            },
            1: {
    			areaOpacity: 0.75,
    			color: '#E91818',
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            2: {
    			areaOpacity: 0.7,
    			color: '#FFD91E',
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            3: {
    			areaOpacity: 0.7,
    			color: '#00D717',
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            4: {
    			areaOpacity: 0.7,
    			color: '#FFD91E',
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            },
            5: {
    			areaOpacity: 0.75,
    			color: '#E91818',
                lineWidth: 0,
                type: 'area',
                visibleInLegend: false,
                enableInteractivity: false
            }
        }
    });
}


google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add colored horizontal bands as a chart background</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Jonathan Ngbonga</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

1 个答案:

答案 0 :(得分：1)

将主要网格线的颜色设置为透明... 

gridlines: {
    color: 'transparent',
},

并在每个主要内容之间添加1个小网格线... 

minorGridlines: {
    color: 'black',
    count: 1
},

请参阅以下工作代码段...

＆＃13;
＆＃13; 
function drawChart () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addColumn('number', 'color band 1');
  data.addColumn('number', 'color band 2');
  data.addColumn('number', 'color band 3');
  data.addColumn('number', 'color band 4');
  data.addColumn('number', 'color band 5');

  var vticks = [];
  var weight = [1,3,2,7,4,6];
  var hticks = [];
  var i;
  for(var i = 0; i< weight.length; i++){
    hticks.push(i+1);
  }
  var br = 1, by = 1, ty = 1, tr = 1, mg = 3;
  for (i = 0; i < 7; i++){
    vticks.push(i);
  }
  var vticksMin = vticks[0];
  var vticksMax = vticks[vticks.length - 1];

  for (var i = 1; i < weight.length+1; i++) {
    data.addRow([i, parseInt(weight[i-1]), br, by,mg,ty,tr]);
  }

  var view = new google.visualization.DataView(data);
  view.setColumns([0,1, {
    type: 'string',
    role: 'annotation',
    calc: function (dt, row) {
      return dt.getValue(row, 1).toString();
    }
  }, 2, 3,4, 5,6]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 700,
    width: 900,
    isStacked: true,
    hAxis: {
      ticks: hticks
    },
    vAxis: {
      minorGridlines: {
        color: 'black',
        count: 1
      },
      gridlines: {
        color: 'transparent',
      },
      viewWindow: {
        min: vticksMin,
        max: vticksMax
      },
      ticks: vticks
    },
    series: {
      0: {
        type: 'line',
        color: '#000'
      },
      1: {
        areaOpacity: 0.75,
        color: '#E91818',
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
      },
      2: {
        areaOpacity: 0.7,
        color: '#FFD91E',
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
      },
      3: {
        areaOpacity: 0.7,
        color: '#00D717',
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
      },
      4: {
        areaOpacity: 0.7,
        color: '#FFD91E',
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
      },
      5: {
        areaOpacity: 0.75,
        color: '#E91818',
        lineWidth: 0,
        type: 'area',
        visibleInLegend: false,
        enableInteractivity: false
      }
    }
  });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
＆＃13; 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add colored horizontal bands as a chart background</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Jonathan Ngbonga</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>
＆＃13;
＆＃13;
＆＃13;

注意：需要移动vticksMin和vticksMax

的行

他们在加载vticks之前使用vticks ...

相关问题
最新问题