【问题标题】:Google charts y-axis color谷歌图表 y 轴颜色
【发布时间】:2021-07-05 18:56:56
【问题描述】:

我正在使用谷歌图表 api(折线图),我想将 y 轴颜色从黑色更改为灰色。
(与网格线颜色相同)

我的代码:

google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        var baseLineColor = '#a3d06e';
        var lineColor = '#717171';

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('number', 'date'); 
            dataTable.addColumn('number', 'sale'); 
            dataTable.addRows([
            [1, 2],
            [2, 3],
            [3, 3],
            [4, 4],
            [5, 5]
        ]);

            var options = {
                enableInteractivity: false,
                tooltip: {trigger: 'none'},
                pointSize: 0,
                legend: 'none',
                chartArea:{width:'94%',height:'70%'},
                backgroundColor: '#6AB5D1',
                series: { 0: { color: lineColor, pointSize: 5, lineWidth: 4 }}, 
                hAxis: { textPosition: 'none', gridlines: {color:"#CCCCCC"} },
                vAxis: { textPosition: 'none', baseline: 3, baselineColor: baseLineColor, gridlines: {color:"#CCCCCC"}}

            };

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

我该怎么做?

【问题讨论】:

    标签: google-visualization


    【解决方案1】:

    设置hAxis.baselineColor 选项:

    hAxis: {
        textPosition: 'none',
        gridlines: {
            color: "#CCCCCC"
        },
        baselineColor: '#CCCCCC'
    }
    

    【讨论】:

      【解决方案2】:

      您可以通过使用这些参数设置baselineColor 和gridlineColor 在google api 中更改您的x 和y 轴颜色。

      vAxis:{
               baselineColor: '#ccc',
               gridlineColor: '#ccc',
             }
      

      【讨论】:

        【解决方案3】:

        请注意:请记住,基线是与您正在使用的轴相交的线。所以如果要给y-axis设置样式,就需要把h-axisbaselineColor改一下。

        一开始我完全想念它。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2023-04-03
          • 1970-01-01
          • 1970-01-01
          • 2014-12-31
          • 2017-10-09
          相关资源
          最近更新 更多