谷歌圖表 - HTML軸標籤和標題

所以我想在谷歌圖表中製作html軸標籤。但是，似乎沒有任何支持將軸標籤或標題創建爲HTML對象。標題很容易修復，只需將它作爲單獨的HTML對象添加到頁面中，但軸標籤就更具挑戰性。有沒有人能夠做到這一點？作爲一個例子，下面的jsfiddle應該顯示當你嘗試使用簡單的sub和sup html標籤時會發生什麼。谷歌圖表 - HTML軸標籤和標題

https://jsfiddle.net/jqmya8j9/1/

google.charts.load('current', {packages: ['corechart']}); 
google.charts.setOnLoadCallback(function() { 
    var data = [['X','Y']], i, options, 
     chart, dataTable; 
    for (i = 0; i < 20; i += 1) { 
     data.push([i, i * i]); 
    } 
    dataTable = 
     google.visualization.arrayToDataTable(data); 

    options = { 
     legend: 'none', 
     title: 'X<sub>m</sub> versus X<sup>2</sup>', 

     //best guess, does nothing 
     titleTextStyle: {isHtml: true}, 

     hAxis: {title: 'X<sub>m</sub>'}, 
     vAxis: {title: 'X<sup>2</sup>'} 
    }; 

    chart = new 
    google.visualization.ScatterChart(document.body); 
    chart.draw(dataTable, options); 
});

基於下面的答案（謝謝！），什麼我實際上做的，我寫了下面的一般規則此使用_ {}和^ {}代替<子>和< SUP>

https://jsfiddle.net/jqmya8j9/2/

google.charts.load('current', {packages: ['corechart']}); 
google.charts.setOnLoadCallback(function() { 
    var data = [['X','Y']], i, options, 
     chart, dataTable; 
    for (i = 0; i < 20; i += 1) { 
    data.push([i, i * i]); 
    } 
    dataTable = 
    google.visualization.arrayToDataTable(data); 

    options = { 
     legend: 'none', 
    title: 'X_{m} versus X^2', 
     hAxis: {title: 'X_m'}, 
    vAxis: {title: 'X^{2}'} 
    }; 

    chart = new 
    google.visualization.ScatterChart(document.body); 

    google.visualization.events.addListener(chart, 'ready', function() { 
     $.each($('text'), function (index, label) { 
     var labelText = $(label).text(); 
     if (labelText.match(/_|\^/)) { 
        labelText = labelText.replace(/_([^\{])|_\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="sub">$1$2</tspan>') 
        labelText = labelText.replace(/\^([^\{])|\^\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="super">$1$2</tspan>') 
      $(label).html(labelText); 
     } 
     }); 
    }); 

    chart.draw(dataTable, options); 
});

來源

2017-06-26 aduss

標籤將只接受文字...

圖表繪製與svg，其可以手動更改當'ready'事件觸發

標籤將是<text>元件
改變字體風格的行內，用SVG內<text>

<tspan>元件例如

<text>X<tspan baseline-shift="super">m</tspan></text>

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = [['X','Y']], i, options, 
 
     chart, dataTable; 
 
    for (i = 0; i < 20; i += 1) { 
 
     data.push([i, i * i]); 
 
    } 
 
    dataTable = google.visualization.arrayToDataTable(data); 
 
    options = { 
 
     legend: 'none', 
 
     title: 'Xm versus X2', 
 
     hAxis: {title: 'Xm'}, 
 
     vAxis: {title: 'X2'} 
 
    }; 
 

 
    chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     $.each($('text'), function (index, label) { 
 
     var labelText = $(label).text(); 
 
     if (labelText.indexOf('X') > -1) { 
 
      labelText = labelText.replace(new RegExp(/m/g), '<tspan baseline-shift="super">m</tspan>'); 
 
      labelText = labelText.replace(new RegExp(/2/g), '<tspan baseline-shift="super">2</tspan>'); 
 
      $(label).html(labelText); 
 
     } 
 
     }); 
 
    }); 
 

 
    chart.draw(dataTable, 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"></div>

來源

2017-06-26 17:13:35 WhiteHat

谷歌圖表 - HTML軸標籤和標題

回答

相關問題