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

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;">Chart</tspan> Title</text>

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

Answer 2

我不确定是否使用HTML / CSS进行编辑，但您可以使用google-charts提供的内容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
}
}

来自这个堆栈答案：How to use ThreeTenABP…

Google文档：Stack

在Google Charts中添加HTML呈现的标题

2 个答案: