Saya mencoba membuat judul yang dirender HTML di Google Charts. Saya ingin membuat variabel string yang berisi kode HTML dan kemudian meneruskannya sebagai judul bagan. Berikut jsFiddle. Inilah yang saya coba lakukan:

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

Ketika saya mencoba mengeluarkan string sebagai judul, saya mendapatkan [objek objek]. Saya mencoba melakukan $($.parseHTML(ch)).html(); tetapi sepertinya ini menghapus tag HTML karena ketika saya menambahkan gaya ke elemen span, itu tidak memberi gaya pada judul. Apa yang harus saya lakukan agar string HTML ditampilkan sebagai judul dengan gaya?

2
user2896120 7 Agustus 2017, 18:39

2 jawaban

Jawaban Terbaik

Opsi titleTextStyle berlaku untuk seluruh judul bagan,
tidak mungkin menggunakan opsi konfigurasi standar untuk menata hanya sebagian dari judul

Itu juga tidak akan menerima html, karena digambar menggunakan svg

Anda dapat menggunakan <div> yang berdekatan dan meninggalkan judul di luar opsi,
atau ubah svg judul setelah peristiwa 'ready' bagan diaktifkan...

Judul akan berada dalam elemen svg <text>,
untuk memisahkan judul dari elemen <text> lainnya pada bagan,
gunakan nilai awal yang dapat digunakan untuk mencarinya...

var options = {
  title: 'chartTitle'
};

Di penangan siap, temukan elemen ...

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

Gunakan elemen <tspan> untuk menata bagian berbeda dari elemen <text>
hasilnya mungkin terlihat seperti ini...

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

Lihat cuplikan kerja berikut ...

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>
1
WhiteHat 8 Agustus 2017, 16:47

Saya tidak yakin tentang mengeditnya dengan HTML/CSS tetapi Anda dapat menggunakan sesuatu yang ditawarkan oleh google-charts dengan 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
}
}

Berasal dari jawaban tumpukan ini: Stack

Dokumentasi Google di sini: Penyesuaian Bagan

0
Travis 7 Agustus 2017, 18:21