Trung tâm Align Tiêu đề Google Chart

Question

Làm thế nào tôi có thể tập trung các tiêu đề trong một Chart Line từ Charts API của Google (Không phải Google Chart Images)

Tôi không thấy bất kỳ tùy chọn như titlePosition: 'trung tâm'

Cảm ơn !

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['xValues', 'yValues'], 
    [0, 34.92], 
    [389, 39.44], 
    [488, 52.11], 
    [652, 55.4] 
    ]); 

    var options = { 
    curveType: 'none', // 'function' 
    title: 'Title', 
    titleTextStyle: { 
     color: '333333', 
     fontName: 'Arial', 
     fontSize: 10 
    }, 
    legend: 'none', 
    enableInteractivity: false 
    }; 

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

Answer 1

Tùy chọn này không được cung cấp bởi the API; bạn chỉ đơn giản là không thể làm điều này.

Answer 2

Another answer cho thấy một cái gì đó như sau:

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'}) 

Nguồn: https://stackoverflow.com/a/16291236/364

Answer 3

tôi sử dụng: titlePosition: 'none'

Và chèn một tiêu đề với HTML bình thường

Answer 4

Bạn có thể dễ dàng làm điều này với thông tin gọi lại từ biểu đồ sau khi nó đã được rút ra và một chút o f toán làm việc trên một số văn bản trong một div.

Chứa biểu đồ của bạn ở vị trí: div tương đối. Thêm một div dưới biểu đồ và vị trí của nó và biểu đồ tuyệt đối.

Sau đó, bạn có thể di chuyển các vị trí hàng đầu của một div & của div xuống bằng một ít môn toán trung học.

<https://jsfiddle.net/o6zmbLvk/2/> 

Answer 5

Sau khi vẽ biểu đồ, gọi hàm xử lý sự kiện:

google.visualization.events.addListener(chart, 'ready', Title_center); 

Và xác định các chức năng như:

function Title_center(){ 

    var title_chart=$("#payer_chart_div svg g").find('text').html(); 

    $("#payer_chart_div svg").find('g:first').html('<text text-anchor="start" x="500" y="141" font-family="Arial" font-size="18" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">'+title_chart+'</text>'); 
} 

Chỉ cần chèn các tiêu đề của biểu đồ của bạn và thêm các thuộc tính X:500 , y:141.

Answer 6

$("#YOUR_GRAPH_WRAPPER svg text").first() 
    .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width())/2).toFixed(0)); 

See my explanation here

Answer 7

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'}) 

// HOẶC

$("#YOUR_GRAPH_WRAPPER svg text").first().attr("x", (($("#time-series-graph svg").width() - parseInt($("#YOUR_GRAPH_WRAPPER svg text").first().attr('x'),10))/2).toFixed(0)); 

Answer 8

document.getElementById ('divid'). GetElementsByTagName ('text') [0] .setAttribute ('x', '350')