如何在ng2-google-charts中绘制x轴和y轴原点线?

时间:2018-06-23 15:14:59

标签: javascript google-visualization chart.js google-chartwrapper

options: {
        height: '100%', width: '90%', backgroundColor: 'transparent',
        tooltip: {
            isHtml: true,
            trigger: 'selection'
        },
        hAxis: { textPosition: 'none', logscale: true  },
        chartArea: {
            width: "78%",
            'backgroundColor': {
                'fill': '#ffffff',
                'opacity': 100
            },
        },
        vAxis: {
            textStyle: {
                fontSize: 13 // or the number you want
            },
            viewWindow: {
                min: 0,
                max: 100
            },
            gridlines: {
                color: 'transparent'
            },
            ticks: [0, 25, 50, 75, 100] // display labels every 25
        },
        legend: { position: 'none' },
        colors: ["orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange", "orange"]
    },

我使用以上选项隐藏了网格线,但在我的情况下,我想在柱形图中单独绘制x轴和y轴原点线。

 above options graph

x轴正确,但是在y轴原点线中我无法绘制。

有人可以帮助我吗?预先感谢。

1 个答案:

答案 0 :(得分:0)

尝试一下

hAxis: {
  baselineColor: 'black',
  ticks: []
},
vAxis: {
  baselineColor: 'black',
  ticks: []
}

hAxis的基线是一条垂直线,vAxis的基线是一条水平线。因此,如果要删除水平黑线,则需要设置vAxis基线颜色,反之亦然。