最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Google Visualization Gauge Change Label Position - Stack Overflow

programmeradmin4浏览0评论

I am attempting to move the gauge label above the visualization.
My attempt to use $("#Min svg text:first").attr("y", 5); resulted in the label being chopped off on top. I've tried digging into the svg but none of my attempts have been able to add any padding/margin above the gauge.

Does anyone have a suggestion or experience with this? Many thanks as always.

google.charts.load('current', {
  'packages': ['gauge']
});

const paramsMin = {
  divId: "Min",
  label: "Fastest",
  value: 3,
  greenFrom: 3,
  greenTo: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMin)
});

const paramsStandard = {
  divId: "Standard",
  label: "Standard",
  value: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsStandard)
});

const paramsMax = {
  divId: "Max",
  label: "Slowest",
  value: 7,
  redFrom: 5,
  redTo: 7,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMax)
});

function drawChart(params) {
  const {
    divId,
    label,
    value,
    greenFrom = null,
    greenTo = null,
    redFrom = null,
    redTo = null
  } = params;

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    [label, value],
  ]);

  var options = {
    width: 120,
    height: 120,
    greenFrom: greenFrom,
    greenTo: greenTo,
    redFrom: redFrom,
    redTo: redTo,
    minorTicks: 5,
    min: 0,
    max: 10,
  };

  var chart = new google.visualization.Gauge(document.getElementById(`${divId}`));

  chart.draw(data, options);
  $(`#${divId} svg text:first`).attr('y', 5);
}
.grid-container-element {
  display: grid;
  grid-template-columns: 125px 125px 125px;
}

.grid-child-element {}
<script src=".7.1/jquery.min.js"></script>
<script type="text/javascript" src=".js"></script>


<div class="grid-container-element">
  <div class="grid-child-element purple">
    <div id="Min" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Standard" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Max" style="width: 120px; height: 120px;"></div>
  </div>
</div>
发布评论

评论列表(0)

  1. 暂无评论