在Google Charts中添加HTML呈現的標題

Question

我正嘗試在Google Charts中創建HTML呈現的標題。我想創建一個包含HTML代碼的字符串變量，然後將其作爲圖表的標題傳遞。這是一個jsFiddle。以下是我正在試圖做的：

HTML

<div id="chart_div" style="width: 900px; height: 500px;"></div> 

JS

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



    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work', 11], 
     ['Eat', 2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var ch = "<span>Hello World!</span>"; 

    ch = $($.parseHTML(ch)); 

    var options = { 
     title: ch 
    }; 

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

當我試圖輸出字符串作爲標題，我得到[對象的對象。我試着做$($.parseHTML(ch)).html();，但它看起來像剝去了HTML標籤，因爲當我將樣式添加到span元素時，它不會設置標題的樣式。我應該怎麼做才能讓HTML字符串以樣式顯示爲標題？

Answer 1

我不知道用HTML/CSS編輯它，但你可以使用的東西，谷歌，圖表與titleTextStyle

var options = { 
titleTextStyle: { 
    color: <string>, // any HTML string color ('red', '#cc00cc') 
    fontName: <string>, // i.e. 'Times New Roman' 
    fontSize: <number>, // 12, 18 whatever you want (don't specify px) 
    bold: <boolean>, // true or false 
    italic: <boolean> // true of false 
} 
} 

提供從這個堆棧答案來自：Stack

谷歌文檔在這裏： Chart Customization

Answer 2

titleTextStyle選項適用於整個圖表標題，
它是不可能使用標準配置o ptions的風格只有標題

也不會接受HTML，因爲它使用SVG

你可以使用鄰近的<div>並留下標題出來的選項繪製，
或更改標題的一部分一旦SVG圖表的'ready'事件觸發...

標題將在SVG <text>元件，
爲標題從圖表上的其它<text>元件分開，
使用初始v ALUE可以用來找到它......

var options = { 
    title: 'chartTitle' 
}; 

在準備處理

，找到元素...

google.visualization.events.addListener(chart, 'ready', function() { 
    var chartTitle = $('#chart text').filter(':contains("chartTitle")')[0]; 
}); 

使用<tspan>元素樣式的<text>元素的不同部分
結果可能看起來像這樣...

<text><tspan style="font-weight: bold;">Chart</tspan> Title</text> 

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'x', type: 'string'}, 
 
     {label: 'y0', type: 'number'}, 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'row 0'}, {v: 10}]}, 
 
     {c:[{v: 'row 1'}, {v: 5}]}, 
 
     {c:[{v: 'row 2'}, {v: 1}]}, 
 
     {c:[{v: 'row 3'}, {v: 2}]}, 
 
     {c:[{v: 'row 4'}, {v: 8}]} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     title: 'chartTitle' 
 
    }; 
 

 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var svgNS = $('#chart svg')[0].namespaceURI; 
 
     var chartTitle = $('#chart text').filter(':contains("chartTitle")')[0]; 
 
     $(chartTitle).text(''); 
 

 
     var textStyle = document.createElementNS(svgNS, 'tspan'); 
 
     $(textStyle).attr('fill', '#ff0000'); 
 
     $(textStyle).attr('font-weight', 'bold'); 
 
     $(textStyle).text('Chart '); 
 
     $(chartTitle).append(textStyle); 
 

 
     var textStyle = document.createElementNS(svgNS, 'tspan'); 
 
     $(textStyle).attr('fill', '#0000ff'); 
 
     $(textStyle).attr('font-weight', 'normal'); 
 
     $(textStyle).text('Title'); 
 
     $(chartTitle).append(textStyle); 
 
    }); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>