使用Google Charts在Stacked Column Chart中显示Y轴

时间:2018-02-07 03:25:12

标签: jquery charts google-visualization stacked-chart yaxis

我使用谷歌图表来显示我的堆积图表。我的x轴是数字,y轴也是数字。我将黑线作为x轴。但缺少y轴。它没有显示。

我尝试了下面提到的属性,但它没有工作:

 vAxis: {
      baseline: 0,
    }

需要设置什么属性才能显示Y轴。

Fiddle

1 个答案:

答案 0 :(得分:0)

放置在x轴上的视图窗口隐藏/覆盖基线......

guard let url = URL(string: self.text!) else { return false }
if UIApplication.shared.canOpenURL(url) {
    // url
}else {
    //not an url
}

将min更改为零,允许基线出现......

hAxis: {
  viewWindow: {
    min: min,
    max: max
  }
  ...

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

var min = 0;
var max = data.getColumnRange(0).max;
google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Machine', '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, ''],
    [0.5, null, null, null, null, null, null, null, null, 0.067],
    [1, 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue", 0.067],
    [2, 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "Green", 0.067],
    [2.5, null, null, null, null, null, null, null, null, 0.067]
  ]);

  var min = 0;
  var max = data.getColumnRange(0).max;

  var options = {
    width: 500,
    height: 500,
    legend: {
      position: 'none',
      maxLines: 6,
      textStyle: {
        color: 'black',
        fontSize: 10
      }
    },
    isStacked: true,
    seriesType: 'bars',
    series: {
      4: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false
      }

    },
    hAxis: {
      ticks: [{
        "v": 1,
        "f": "M1"
      }, {
        "v": 2,
        "f": "M2"
      }],
      viewWindow: {
        min: min,
        max: max
      }
    }
  };

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