javascript - 如何在绘图中使颜色栏的刻度值不均匀

在绘图中，如何渲染等高线图的这种颜色栏？只是想弄清楚轮廓是否支持轮廓图颜色条的不均匀刻度值。



上面的图像是我要深入了解的内容。

tickvals和ticktext不能按预期方式工作。

最佳答案

试试这个Stackoverflow问题：

Plotly axis as exponential format

直接文本形式：所有信用至：@MaximilianPeters


  1：如何使其在子图上工作。我尝试在构建中调用Java
  每个子图，但是所有图都没有指数。


2nd / 3rd / etc的刻度。子图具有类名称，例如y2tick / y3tick / etc。我们可以降低d3选择器的特定性，然后使用each更改所有刻度。

ticks = Plotly.d3.selectAll('g.yaxislayer-above').selectAll('text');
ticks.each(function(d, i)
{
  var num = parseInt(d.text).toExponential();
  Plotly.d3.select(this).text(num);
})

  2：使其在x和y轴上均有效（我尝试过，失败了，哭了
  小）


只需将selectAll语句更改为Plotly.d3.selectAll('g.xaxislayer-above').selectAll('text')


  3：当轴变成非轴时，使其不破坏宇宙
  数字（我的应用程序也可以绘制日期列，因此需要检查
  是否实际上是数字输入）


您可以更改fixTicks函数以检查输入值是否为数字，例如通过使用typeof或正则表达式。使用1999、2000等值时，可能会比较棘手，您需要手动对其进行处理。


  4：如果可能，打印为1.23E + 1而不是1E + 1


toExponential取一个parameter，即“小数点后的符号位数”，即num.toExponential(3)可以解决您的问题。


  通过评论：当价格变动值为负值时，我似乎得到NaN


使用Unicode minus sign代替常规的破折号。您可以将其替换为以下JavaScript行：

var num = parseInt(tick[0].innerHTML.replace(/\\u2013|\\u2014|\\u2212/g, '-'));

注意：R中需要双反斜杠\\，纯JavaScript只需一个\。