表示 Google 图表中单个点的轴值的水平线

Question

我想使用 Google 图表中的烛台图或折线图。有什么方法可以从图表最右边的点（最后一个值）到 Y 轴绘制一条水平线，并在轴上显示 Y 值？我只想在图表上清楚地显示 "last" 点的 Y 值。

Answer 1

由于 Google 使用 HTML5/SVG 呈现的图表，您可以考虑以下解决方案来呈现 自定义水平轴 ：

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2004', 1000],
        ['2005', 1170],
        ['2006', 660],
        ['2007', 1030]
    ]);

    var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
    drawAdditionalHAxis(chart, data);  //render custom axis (line & label) for the last value 
}


function drawAdditionalHAxis(chart,dataTable){
    var layout = chart.getChartLayoutInterface();
    var chartArea = layout.getChartAreaBoundingBox();

    var svg = chart.getContainer().getElementsByTagName('svg')[0];
    var lastVal = dataTable.getValue(dataTable.getNumberOfRows()-1,1);
    var yLoc = layout.getYLocation(lastVal);
    svg.appendChild(createLine(chartArea.left,yLoc,chartArea.width + chartArea.left,yLoc,'#cccccc',1)); // axis line
    svg.appendChild(createText(chartArea.left - 40 ,yLoc + 5,'Arial','13',lastVal)); // axis label 
}





function createLine(x1, y1, x2, y2, color, w) {
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', x1);
    line.setAttribute('y1', y1);
    line.setAttribute('x2', x2);
    line.setAttribute('y2', y2);
    line.setAttribute('stroke', color);
    line.setAttribute('stroke-width', w);
    return line;
}

function createText(x, y, fontFamily, fontSize,value) {
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', x);
    text.setAttribute('y', y);
    text.setAttribute('font-family', fontFamily);
    text.setAttribute('font-size', fontSize);
    text.innerHTML = value;
    return text;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 640px; height: 480px"></div>

表示 Google 图表中单个点的轴值的水平线

Horizontal line indicating axis value for a single point in Google Charts

google-visualization