如何调整右侧的垂直轴?

时间:2019-01-28 01:04:00

标签: javascript html charts google-visualization candlestick-chart

我需要将垂直轴的标签取为右对齐,而不是左对齐。

“这只是垃圾,只是用来填充一些空间而已。”

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

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

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

没有用于标签对齐的标准配置选项,
但是您可以在图表的google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend: 'none' }; var container = document.getElementById('chart_div'); var chart = new google.visualization.CandlestickChart(container); google.visualization.events.addListener(chart, 'ready', function () { var chartLayout = chart.getChartLayoutInterface(); var labelIndex = -1; var labelWidth; var axisLabels = container.getElementsByTagName('text'); Array.prototype.forEach.call(axisLabels, function(label) { if (label.getAttribute('text-anchor') === 'end') { labelIndex++; labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width; label.setAttribute('x', labelWidth); } }); }); chart.draw(data, options); });事件中手动移动它们。

请参阅以下工作片段...

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
... These roles can be applied either to entire projects or specific buckets.