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

我的小提琴中有三个叉子可能与你想要的一致：

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轴本身是数字或日期/时间的情况。这也会弄乱你的轴标签，因为标签与刻度相关联，但我不确定你要显示的是什么，所以对你来说可能或不重要。

在Google可视化中添加当前年份的垂直行

1 个答案: