在Google可视化中为当前年份添加垂直线 [英] Add vertical line for current year in google visualization

问题描述

我需要在当前年份（x轴）中添加一条垂直线。

I need to add one vertical line in current year (x axis)

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

Configuration Options in my code follows.

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

请注意，我已经使用了注释，但问题是一个位线可见。

Please note I have used annotation for this, but problem is a bit line alone visible. I need a line for full height .

我的完整代码：

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]

推荐答案

我有三个叉子从您的小提琴，可能沿着您正在寻找的线：

I have three forks from your fiddle that might be along the lines of what you are looking for:

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

http://jsfiddle.net/Balrog30/W2JWa/1/ -
使用注释，但只是放置一个空格不打印，但仍绘制一行。

http://jsfiddle.net/Balrog30/W2JWa/1/ - Using annotations, but just placing a space makes nothing print, but still draws a line.

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

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

http://jsfiddle.net/Balrog30/W2JWa/2/ - Text is still in annotation, but text opacity set to 0 so that text is totally transparent.

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轴是数字或日期/时间本质上才有效。这也会弄乱你的轴标签，因为标签是绑定到蜱，但我不是很确定你想显示什么，所以它可能是也可能不重要你。

http://jsfiddle.net/Balrog30/W2JWa/3/ - The third one changes the horizontal axis to a continuous type axis so that I can add ticks. This only works if your x-axis is numberic or date/time in nature. This also kind of messes up your axis labeling because the labeling is tied to the ticks, but I'm not really sure what you're trying to display, so it may or may not matter to you.

这篇关于在Google可视化中为当前年份添加垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！