css - 在谷歌可视化中为当年添加垂直线

Question

我需要在当年添加一条垂直线(x 轴)

我的代码中的配置选项如下。

var options = {
        title: '*****',
        curveType: 'function',
        height: 300,
        legend: { position: 'bottom' },
        chartArea: {width: '80%'},
        pointSize:5,
        width: 500,
        annotation: {
            1: {
                style: 'line'
            }
        }
    }

请注意，我为此使用了注释，但问题是只有一行可见。我需要一条全高线。

我的完整代码:

var options = {
        title: 'Chart',
        curveType: 'function',
        height: 300,
        legend: { position: 'bottom' },
        chartArea: {width: '80%'},
        pointSize:5,
        annotation: { height: 300 }
    }, 

chartData = JSON.parse(window._data.chartData), chartPoint = new Array(), i = 0, j = 0;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Google');
    data.addColumn('number', 'Yahoo');
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn('number', 'Value');
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn({type: 'string', role: 'annotation'});
    if(Object.keys(chartData.myMap).length > 0) {
        $.each(chartData.myMap, function(k, v) {
            var val = Math.round(v * 100) / 100;
            chartPoint[i] = new Array();
            var cDate = new Date();
            if(cDate.getFullYear()==k)
            chartPoint[i] = [k, val, null, false, null, false,k];
            else
            chartPoint[i] = [k, val, null, false, null, false,null];
            i++;
        });
        i--;
    }
    if(Object.keys(chartData.myDataMap).length > 0) {
        $.each(chartData.myDataMap, function(k, v) {
            var val = Math.round(v * 100) / 100;
            var val1 = Math.round(chartData.averageMap[k] * 100) / 100;
            if(j==0) {var l = val; j++; } else l = null;
            chartPoint[i] = new Array();
            chartPoint[i] = [k,l,val,false,val1, false, null];
            i++;
        });
    }
    data.addRows(chartPoint);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

应该是这个页面里的样子[ http://jsfiddle.net/NC37X/][3]

Answer 1

我从你的 fiddle 中得到了三个 fork ，它们可能与你正在寻找的东西一致:

data.addRow(["G", ' ', 'Foo annotation', 8, 1, 0.5]);

http://jsfiddle.net/Balrog30/W2JWa/1/ -使用注释，但只是放置一个空格不打印任何东西，但仍然画一条线。

---

        annotations: {
            style: 'line',
            textStyle: {
                opacity: 0
            }
        }

http://jsfiddle.net/Balrog30/W2JWa/2/ -文本仍在注释中，但文本不透明度设置为 0，以便文本完全透明。

---

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

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    data.addColumn('number', 'Blanket 2');
    data.addRow([{v: 0, f:"A"}, null, null, 1, 1, 0.5]);
    data.addRow([{v: 1, f:"B"}, null, null, 2, 0.5, 1]);
    data.addRow([{v: 2, f:"C"}, null, null, 4, 1, 0.5]);
    data.addRow([{v: 3, f:"D"}, null, null, 8, 0.5, 1]);
    data.addRow([{v: 4, f:"E"}, null, null, 7, 1, 0.5]);
    data.addRow([{v: 5, f:"F"}, null, null, 7, 0.5, 1]);
    data.addRow([{v: 6, f:"G"}, null, null, 8, 1, 0.5]);
    data.addRow([{v: 7, f:"H"}, null, null, 4, 0.5, 1]);
    data.addRow([{v: 8, f:"I"}, null, null, 2, 1, 0.5]);
    data.addRow([{v: 9, f:"J"}, null, null, 3.5, 0.5, 1]);
    data.addRow([{v: 10, f:"K"}, null, null, 3, 1, 0.5]);
    data.addRow([{v: 11, f:"L"}, null, null, 3.5, 0.5, 1]);
    data.addRow([{v: 12, f:"M"}, null, null, 1, 1, 0.5]);
    data.addRow([{v: 13, f:"N"}, null, null, 1, 0.5, 1]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        curveType: 'function',
        width: 500,
        hAxis: {
            ticks: [{v:6, f:"G"}, {v:10, f:"K"}]
        },
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line'
        }
    });
}

http://jsfiddle.net/Balrog30/W2JWa/3/ -第三个将水平轴更改为连续类型轴，以便我可以添加刻度。这仅在您的 x 轴本质上是数字或日期/时间时才有效。这也会弄乱您的轴标签，因为标签与刻度相关，但我不太确定您要显示的内容，因此它对您来说可能重要也可能不重要。