如何將HTML徽章作爲標籤包含在柱狀圖中？

var xValue = ['1','2','3','4','5','6','7','8','9','10','11','12','13']; 
 
var yValue = [10, 6, 8,9,1,17,3,7,13,2,12,4,13]; 
 
var wicket1 = ['W','','W','W','','','','W','','','','','W']; 
 

 
var trace1 = { 
 
    x: xValue, 
 
    y: yValue, 
 
    type: 'bar', 
 
    text: wicket1, 
 
    textposition: 'outside', 
 
}; 
 

 
var data1 = [trace1]; 
 

 
Plotly.newPlot('myDiv', data1);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
    <div id="myDiv"></div>

來源

2017-08-10 FaLIL Muhammed

你是什麼意思與*徽章*？ –

我需要用 W替換'W' –

它取決於您正在使用的特定圖表庫。你可能應該在他們的Github頁面上提問。 – Nisarg

是的，它是可能的，該腳本將創建一個SVG文件。在這些g-標籤內，您可以放置文字和圖像。但是你需要在SVG中完成。（文= <text x="0" y="15" fill="red">Your text here</text>）

來源

2017-08-10 07:01:39

我可以得到一個示例代碼來使用SVG生成一個簡單的柱形圖？ –

你不能只使用SVG製作柱形圖，但你可以使用JS添加文本 –

無法使用SVG製作柱形圖？ @ North-Wind –

我希望如果沒有這將有助於你遠一點...對不起。

var xValue = ['1','2','3','4','5','6','7','8','9','10','11','12','13']; 
 
var yValue = [10, 6, 8,9,1,17,3,7,13,2,12,4,13]; 
 
var wicket1 = ['W','','W','W','','','','W','','','','','W']; 
 

 
var trace1 = { 
 
    x: xValue, 
 
    y: yValue, 
 
    type: 'bar', 
 
    text: wicket1, 
 
    textposition: 'outside', 
 
}; 
 

 
var data1 = [trace1]; 
 

 
Plotly.newPlot('myDiv', data1); 
 

 

 
var container = document.getElementsByClassName("bartext")[0]; 
 
container.textContent = "Label";

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
    <div id="myDiv"></div>

來源

2017-08-10 08:10:42

我希望這是你在找什麼，我不能使它工作使用類，但如果我添加的樣式內嵌它的偉大工程，希望是可以接受的。

只有一些樣式才起作用，因此將「徽章」樣式放置爲內聯樣式並查看是否生成了所需的輸出。

var xValue = ['1','2','3','4','5','6','7','8','9','10','11','12','13']; 
 
var yValue = [10, 6, 8,9,1,17,3,7,13,2,12,4,13]; 
 
var wicket1 = ['W','','W','W','','','','W','','','','','W'].map(function(el) { 
 
return '<span style="color:blue;">'+el+'</span>' 
 
});; 
 

 
var trace1 = { 
 
    x: xValue, 
 
    y: yValue, 
 
    type: 'bar', 
 
    text: wicket1, 
 
    textposition: 'outside', 
 
}; 
 

 
var data1 = [trace1]; 
 

 
Plotly.newPlot('myDiv', data1);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
    <div id="myDiv"></div>

來源

2017-08-10 10:22:46

@FaLIL這個答案對你有幫助嗎？ –

如何將HTML徽章作爲標籤包含在柱狀圖中？

回答

相關問題