Question

在Google弃用Google图表之前，可以使用参数 chg 更改图表上的网格线样式。你可以在这里查看： example of chart with dashed grid lines

Obs：要更改短划线样式，只需将chg = 8.33,0， 5,5 更改为chg = 8.33,0， 3,3 ，例如。

来源：http://psychopyko.com/tutorial/how-to-use-google-charts/

现在在新的Google图表中，我想做同样的事情。我尝试了很多方法，并获得了改变 CSS 的可能解决方案。这是小提琴： http://jsfiddle.net/R4DGp/

但是，我想知道是否有一个更清晰的解决方案而不直接在 CSS 中更改。可能类似于lineDashStyle，但对于网格线。

JS

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Game', 'Pts', 'Agt'],
        [1, 21, 32],
        [2, 18, 23],
        [3, 27, 17],
        [4, 35, 24],
        [5, 23, 10],
        [6, 20, 21],
        [7, 28, 24],
        [8, 17, 21],
        [9, 22, 20],
        [10, 13, 28],
        [11, 27, 13],
        [12, 31, 28],
        [13, 23, 21],
        [14, 28, 27],
        [15, 17, 20],
        [16, 13, 17]
    ]);

    var options = {
        'focusTarget': 'category',
        'lineWidth': 0.75,
        'hAxis': {
            'color': 'none',
            'baselineColor': 'none',
            'textStyle': {
                'color': '#8C8C8C',
                'fontName': 'Calibri',
                'fontSize': 12,
            },
        },
        'vAxis': {
            'color': 'none',
            'baselineColor': 'none',
            'textStyle': {
                'color': '#8C8C8C',
                'fontName': 'Calibri',
                'fontSize': 12,
            },
        },
        'legend': 'none',
        'curveType': 'function',
        'legend': 'none',
        'pointSize': 7,
        'colors': ['#9FAEC2', '#e2431e'],
        'crosshair': {
            trigger: 'none'
        }
    };

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

CSS

svg g g g rect + rect{
    fill: none;
    fill-opacity: 0.5;
    stroke: gray; 
    stroke-width: 2;
    stroke-dasharray: 7 6;
    width:0.5;
}
svg g g g circle{
    fill:black;
}
    svg g g g circle:hover{
        stroke:yellow;
        stroke-width:2;
        fill 
    }

HTML

<div id="chart_div" style="width: 900px; height: 500px;"></div>

如何在Google Charts中将网格线的样式更改为点线或虚线？

0 个答案: