Google图表：在柱状图中自定义h轴基线 [英] Google charts : customizing the h-axis base line In column charts

问题描述

就我而言，我想在h轴或y轴基线上显示一些指示标记。请检查图像以获取更多信息。

In my case I want to show the some indication mark on h-axis or y-axis base line. please check the image for more understanding.

在图像中，我们显示的刻度值为[0,10,20,30,40 ]。因此，对于每个值，我们都需要在h轴基线上显示一条小线。

In the image we are showing tick values are [0,10,20,30,40]. So for each value we need to show a small line on h-axis baseline.

我能够在h轴上显示基线，但是我无法实现h轴基线上的小线

I am able to show base line in h-axis, but I can't achieve the small line on h-axis baseline

请帮助我解决此问题。

Please help me to resolve this.

  barTitle = 'Occupancy';
barType = 'ColumnChart';
barData = [
  [{v: 0, f:''}, 0,0,0,0],
   [{v:1,f:'SUN'}, 5,8,10,12],
   [{v:2,f:"MON"}, 6,4,14,10],
   [{v:3,f:"TUE"}, 13,10,3,9],
   [{v:4,f:"WED"}, 10,16,8,6],
   [{v:5,f:"THU"}, 16,9,8,6],
   [{v:6,f:"FRI"}, 5,5,10,14],
   [{v:7,f:"SAT"}, 9,12,4,11]
];
barColumnNames = ['DAY', 'Regular','Compact','Electric','ADA'];
barOptions = { 
  hAxis:{
    title:'DAY',
   titlePosition:'in',

    ticks:[
    {v: 0, f:''},
    {v:1,f:'SUN'}, 
   {v:2,f:"MON"},
   {v:3,f:"TUE"},
   {v:4,f:"WED"},
   {v:5,f:"THU"},
   {v:6,f:"FRI"},
   {v:7,f:"SAT"}
  ]
  },
 vAxis: {

gridlines: {
  color: 'none'
},

ticks: [0, .25, .50, .75, 1],
baselineColor:'#00ff00',

  },
  isStacked:"percent",
  width:550,
  height:300,
  bar:{groupWidth:"25%"},
  legend:{position:"none"},
  series:{

    0:{color:'rgb(185,2,118)'},
    1:{color:'rgb(82,95,107)'},
    2:{color:'rgb(0,142,207)'}
  },


};

推荐答案

没有可用的选项来显示轴上的小指示线。

there are no options out of the box to show a small indicator line on the axis.

，但是您可以在图表的就绪 事件中绘制自己的图像，

参见以下工作片段...

but you can draw your own, on the chart's 'ready' event,
see following working snippet...

在这里，我们使用图表方法 getChartLayoutInterface & getBoundingBox 查找行的位置...

here, we use chart methods getChartLayoutInterface & getBoundingBox to find the placement of the lines...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  barTitle = 'Occupancy';
  barType = 'ColumnChart';
  barData = [
    [{v: 0, f:''}, 0,0,0,0],
    [{v:1,f:'SUN'}, 5,8,10,12],
    [{v:2,f:"MON"}, 6,4,14,10],
    [{v:3,f:"TUE"}, 13,10,3,9],
    [{v:4,f:"WED"}, 10,16,8,6],
    [{v:5,f:"THU"}, 16,9,8,6],
    [{v:6,f:"FRI"}, 5,5,10,14],
    [{v:7,f:"SAT"}, 9,12,4,11]
  ];
  barColumnNames = ['DAY', 'Regular','Compact','Electric','ADA'];
  barOptions = {
    hAxis:{
      title:'DAY',
      titlePosition:'in',
      ticks:[
        {v: 0, f:''},
        {v:1,f:'SUN'},
        {v:2,f:"MON"},
        {v:3,f:"TUE"},
        {v:4,f:"WED"},
        {v:5,f:"THU"},
        {v:6,f:"FRI"},
        {v:7,f:"SAT"}
      ]
    },
    vAxis: {
      gridlines: {
        color: 'none'
      },
      ticks: [0, .25, .50, .75, 1],
      baselineColor:'#00ff00',
    },
    isStacked:"percent",
    width:550,
    height:300,
    bar:{groupWidth:"25%"},
    legend:{position:"none"},
    series:{
      0:{color:'rgb(185,2,118)'},
      1:{color:'rgb(82,95,107)'},
      2:{color:'rgb(0,142,207)'}
    },
  };

  barData.splice(0, 0, barColumnNames);
  var dataTable = google.visualization.arrayToDataTable(barData);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization[barType](container);
  google.visualization.events.addListener(chart, 'ready', function () {
    // init variables
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var chartLayout = chart.getChartLayoutInterface();
    var baseBounds = chartLayout.getBoundingBox('hAxis#0#baseline');

    // add tick lines
    var tickWidth = 10;
    barOptions.vAxis.ticks.forEach(function (tick, index) {
      // ignore baseline
      if (index === 0) {
        return;
      }

      // add axis tick
      var tickBounds = chartLayout.getBoundingBox('vAxis#0#label#' + index);
      var tickLine = svg.appendChild(document.createElementNS(svgNS, 'rect'));
      tickLine.setAttribute('x', (baseBounds.left - tickWidth));
      tickLine.setAttribute('y', tickBounds.top + (tickBounds.height / 2));
      tickLine.setAttribute('width', tickWidth);
      tickLine.setAttribute('height', 1);
      tickLine.setAttribute('stroke', 'none');
      tickLine.setAttribute('stroke-width', 0);
      tickLine.setAttribute('fill', '#333333');
    });
  });
  chart.draw(dataTable, barOptions);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于Google图表：在柱状图中自定义h轴基线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！