Javascript 使用tickformat在绘图中设置轴记号的文本格式

是否可以使用tickformat向xaxis和yaxis刻度添加格式

其思想是将axis的名称切割为：

axiswithaverylongname --> axisw...

在plotly api参考中，提供了设置日期格式的示例

他们还参考了d3文档

从plotly参考中：

tickformat (string) 
default: "" 
Sets the tick label formatting rule using d3 formatting mini-languages 
which are very similar to those in Python. For numbers, see: 
https://github.com/d3/d3-format/blob/master/README.md#locale_format 
And for dates see: https://github.com/d3/d3-time-
format/blob/master/README.md#locale_format We add one item to d3's 
date formatter: "%{n}f" for fractional seconds with n digits. For 
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f" 
would display "09~15~23.46"

---

据我所知，没有办法通过

tickformat

直接实现，但几行JavaScript代码可以为您解决这个问题

Plotly.d3.selectAll(".xtick text").each(function(d, i) {
  Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5));
});

使用d3的

seleectAll

wet在x轴上获取所有

text

标签，并使用初始标签的前5个字母更新文本

您可以自动执行，也可以在按下下面示例中的按钮时执行

var trace1={
x:[“A”，“B1”，“axiswithaverylongname”，“哇，等一下，太长了”]，
y:[1,2,3,4]，
类型：“条”
};
var myPlot=document.getElementById（'myPlot'）
Plotly.newPlot（'myPlot'，[trace1]）；
document.getElementById（“cleanButton”）.addEventListener（“单击”，函数（）{
Plotly.d3.选择全部（“.xtick text”）。每个（函数（d，i）{
if（Plotly.d3.select（this.html（）.length>8）{
Plotly.d3.select（this.html）（Plotly.d3.select（this.html（）.substr（0,5）+’…）；
}
});
});

清理x轴
据我所知，无法通过
tickformat
直接执行，但几行JavaScript代码将为您修复它

Plotly.d3.selectAll(".xtick text").each(function(d, i) {
  Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5));
});

使用d3的
seleectAll
wet在x轴上获取所有
text
标签，并使用初始标签的前5个字母更新文本

您可以自动执行，也可以在按下下面示例中的按钮时执行


var trace1={
x:[“A”，“B1”，“axiswithaverylongname”，“哇，等一下，太长了”]，
y:[1,2,3,4]，
类型：“条”
};
var myPlot=document.getElementById（'myPlot'）
Plotly.newPlot（'myPlot'，[trace1]）；
document.getElementById（“cleanButton”）.addEventListener（“单击”，函数（）{
Plotly.d3.选择全部（“.xtick text”）。每个（函数（d，i）{
if（Plotly.d3.select（this.html（）.length>8）{
Plotly.d3.select（this.html）（Plotly.d3.select（this.html（）.substr（0,5）+’…）；
}
});
});

清洁x轴
@alfaz jikani:我将在使用IE11访问计算机时对其进行测试。@MaximilianPeters，我找到了IE11的有效解决方案。引用：
Plotly.d3.selectAll（.xtick text.ytick text”）.each（函数（d，i）{//使用jquery//使用d.text，而不是通过“Plotly.d3.select（this.html（）”$（this.text（d.text.substr（0，5））；）读取DOM）@alfaz jikani:当我可以使用IE11访问计算机时，我会对它进行测试。@MaximilianPeters，我找到了IE11的有效解决方案。引用：
Plotly.d3.selectAll（.xtick text.ytick text”）.each（函数（d，i）{//使用jquery//使用d.text，而不是通过“Plotly.d3.select（this.html（）”$（this.text（d.text.substr（0，5））；）读取DOM）