x 轴值未显示在谷歌折线图中

Question

我有以下代码前折线图。

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = google.visualization.arrayToDataTable([
  ['SiteName', 'Availability'],
  <?php
      foreach($val as $data){
        echo "['".$data['name']."', ".$data['avil']."],";
      }
  ?>
]);

// Set chart options
var options = {
    hAxis: {
      title: 'Type'
    },
    vAxis: {
      title: 'Total',
      gridlines: {
            color: 'transparent'
        }
    },
    'title':'Uptime Percentage',
    'width':830,
    'height':300,
    legend: {position: 'none'},
    };

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_line'));

function selectHandler() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var topping = data.getValue(selectedItem.row, 0);
    alert('The user selected ' + topping);
  }
}

google.visualization.events.addListener(chart, 'select', selectHandler);    
chart.draw(data, options);
}
</script>

为了删除水平线，我将 gridline 添加为透明的，为了不显示图例，我将其位置设为无。它工作但现在，我的 x 轴值显示不正确。见下文。

那么，我怎样才能正确显示我的 x 轴值？？？请帮帮我

Answer 1

看起来图表在其容器可见之前正在绘制

请参阅下面的工作 sn-p，它会产生类似的结果...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Availability'],
    ['Akron, OH', 99.9],
    ['Avalon, TX', 100],
    ['Holly, MI', 100],
    ['Lancaster, TX', 100],
    ['Las Vegas, NV', 100],
  ]);

  var options = {
    hAxis: {
      title: 'Type'
    },
    vAxis: {
      title: 'Total',
      gridlines: {
        color: 'transparent'
      }
    },
    title: 'Uptime Percentage',
    width: 200,
    height: 300,
    legend: {
      position: 'none'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.className = null;
  });
  chart.draw(data, options);
}

.hidden {
  display: none;
  visibility: hidden;
}

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

---

更正选项

1)

确保容器在绘制之前可见，
请参阅以下工作 sn-p...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Availability'],
    ['Akron, OH', 99.9],
    ['Avalon, TX', 100],
    ['Holly, MI', 100],
    ['Lancaster, TX', 100],
    ['Las Vegas, NV', 100],
  ]);

  var options = {
    hAxis: {
      title: 'Type'
    },
    vAxis: {
      title: 'Total',
      gridlines: {
        color: 'transparent'
      }
    },
    title: 'Uptime Percentage',
    width: 200,
    height: 300,
    legend: {
      position: 'none'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

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

---

2)

手动调整 x 轴大小以确保显示所有内容

查看选项...

chartArea.bottom
hAxis.slantedText
hAxis.textStyle

请参阅以下工作 sn-p...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Availability'],
    ['Akron, OH', 99.9],
    ['Avalon, TX', 100],
    ['Holly, MI', 100],
    ['Lancaster, TX', 100],
    ['Las Vegas, NV', 100],
  ]);

  var options = {
    hAxis: {
      title: 'Type',
      slantedText: true,
      textStyle: {
        fontSize: 10
      },
    },
    vAxis: {
      title: 'Total',
      format: '#,##0.0',
      gridlines: {
        color: 'transparent'
      }
    },
    title: 'Uptime Percentage',
    width: 200,
    height: 300,
    legend: {
      position: 'none'
    },
    chartArea: {
      bottom: 96,
      left: 72,
      top: 24
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.className = null;
  });
  chart.draw(data, options);
}

.hidden {
  display: none;
  visibility: hidden;
}

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

---

3)

要在 x 轴上显示一条水平线，请参阅baseline 的选项...

    vAxis: {
      baseline: 99.9,
      baselineColor: '#f44336',

动态查找基线，使用数据表法 --> getColumnRange

该方法返回一个带有 min 和 max 键的对象

请参阅以下工作 sn-p...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Availability'],
    ['Akron, OH', 99.9],
    ['Avalon, TX', 100],
    ['Holly, MI', 100],
    ['Lancaster, TX', 100],
    ['Las Vegas, NV', 100],
  ]);

  var options = {
    hAxis: {
      title: 'Type',
      slantedText: true,
      textStyle: {
        fontSize: 10
      },
    },
    vAxis: {
      baseline: data.getColumnRange(1).min,
      baselineColor: '#f44336',
      title: 'Total',
      format: '#,##0.0',
      gridlines: {
        color: 'transparent'
      }
    },
    title: 'Uptime Percentage',
    width: 200,
    height: 300,
    legend: {
      position: 'none'
    },
    chartArea: {
      bottom: 96,
      left: 72,
      top: 24
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    container.className = null;
  });
  chart.draw(data, options);
}

.hidden {
  display: none;
  visibility: hidden;
}

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