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>

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

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

Answer 1

看起来图表是在容器可见之前绘制的

请参阅以下工作代码段，它会产生类似的结果......

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）

确保容器在绘图前可见，
请参阅以下工作代码段...

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

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

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',

动态查找基线，使用数据表方法 - ＆gt; getColumnRange

该方法返回一个带有min和max

键的对象

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

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>