在Google图表中添加HTML呈现的标题 [英] Adding an HTML rendered title in Google Charts
问题描述
我试图在Google图表中创建HTML呈现的标题。我想创建一个包含HTML代码的字符串变量，然后将其作为图表的标题传递。这是 jsFiddle 。以下是我想要做的：
HTML
< div id =chart_divstyle =width：900px; height：500px;>< / div>
JS
google.load（visualization，1，{
packages：[corechart]
}）;
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
var data = google.visualization.arrayToDataTable（[
['Task'，'Hours per Day']] ，
['Work'，11]，
['Eat'，2]，
['Commute'，2]，
['看电视'，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）;
}
当我尝试输出字符串作为标题时，我得到[object object] 。我尝试了 $（$。parseHTML（ch））。html（）; 但它看起来像是剥离了HTML标签，因为当我向span元素添加样式时，没有风格的标题。我应该怎么做才能让HTML字符串显示为带有样式的标题？
titleTextStyle 选项适用于整个图表标题，
使用标准配置选项只能标题部分标题是不可能的
它也不会接受HTML，因为它是使用svg绘制的
您可以使用相邻的< div> 并将标题留在选项 -
中，或者在图表的'ready'事件触发时更改标题的svg ... 标题将在svg < text> 元素中，
将标题分隔开从图表上其他< text> 元素，
使用可用于查找它的初始值...
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;>图表< / tspan>标题< /文本>
请参阅以下工作片段...
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 ：{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：' （图表，'图表'）; 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 = $（＃图表文本）滤波器（：含有（ chartTitle））[0]; $（chartTitle）的.text（）; var textStyle = document.createElementNS（svgNS，'tspan'）; $（textStyle）.attr（'fill'，'＃ff0000'）; $（textStyle）.attr（'font-weight'，'bold'）; $（textStyle）.text（'Chart'）; $（chartTitle）.append（文字样式）; var textStyle = document.createElementNS（svgNS，'tspan'）; $（textStyle）.attr（'fill'，'＃0000ff'）; $（textStyle）.attr（'font-weight'，'normal'）; $（文本样式）的.text（标题）; $（chartTitle）.append（文字样式）; }）; chart.draw（数据，选项）; }，packages：['corechart']}）;
I'm trying to create an HTML rendered title in Google Charts. I want to create a string variable that contains HTML code and then pass it on as the title of the chart. Here's a jsFiddle. Here's what I'm trying to do:
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);
}
When I try outputting the string as a title, I get [object object]. I tried doing $($.parseHTML(ch)).html(); but it looks like this strips the HTML tags because when I add styling to the span element it doesn't style the title. What should I do to get an HTML string to be displayed as a title with styling?
the titleTextStyle option applies to the entire chart title,
it is not possible using standard config options to style only part of the title
it will also not accept html, since it is drawn using svg
you could use an adjacent <div> and leave the title out of the options,
or change the title's svg once the chart's 'ready' event fires...
the title will be in a svg <text> element,
to separate the title from the other <text> elements on the chart,
use an initial value that can be used to find it...
var options = {
title: 'chartTitle'
};
in the ready handler, find the element...
google.visualization.events.addListener(chart, 'ready', function () {
var chartTitle = $('#chart text').filter(':contains("chartTitle")')[0];
});
use the <tspan> element to style different parts of the <text> element
result may look something like this...
<text><tspan style="font-weight: bold;">Chart</tspan> Title</text>
see following working snippet...
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>
这篇关于在Google图表中添加HTML呈现的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
