如何将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徽章作为标签包含在柱状图中？

回答

相关问题