Highcharts悬停xAxis标签的独特价值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highcharts悬停xAxis标签的独特价值相关的知识,希望对你有一定的参考价值。

高等问题的新手。

有一个函数可以解析散点图的xAxis标签。工作正常,但值太长并被截断。这些需要在悬停时显示,而xAxis标签上显示的值应该是括号中包含的字符串中的最后一个单词。示例和代码如下。有时间试图找到有关在Highchart中更改xAxis的悬停结果的任何信息。

原始字符串:root.D_seasonality.D_poly [poly0]

在parseLabels函数之后。可见图表标签:“poly0”。

预期悬停:“seasonality_trend_poly0”(当前图表标签)。

尝试将函数格式化或插入到HighchartOptions / xAxis中,但没有运气。

打字稿:

    parseLabels(uniqueFeatures) {
    this.labels = [];
    for (let i = 0; i < uniqueFeatures.length; i++) {

      let trimmedFeature = '';

      let curFeature = uniqueFeatures[i];
      let start = curFeature.search('>') + 4;
      curFeature = curFeature.substr(start, curFeature.length);

      let end = curFeature.search('<');
      if (end === -1) {
        end = curFeature.search('\[');
      }

      let key = curFeature.substr(0, end);

      trimmedFeature = trimmedFeature + key;
      curFeature = curFeature.substr(end + 1, curFeature.length);

      start = 0;
      end = curFeature.search('>');

      if (end === -1) {
        if (trimmedFeature.length > 1) {
          this.labels.push(trimmedFeature);
        }
      } else {

        key = curFeature.substr(start, end);

        trimmedFeature = trimmedFeature + '_' + key;
        curFeature = curFeature.substr(end + 1, curFeature.length);

        start = curFeature.search('\[') + 1;

        if (start !== -1) {

        } else {
          if (trimmedFeature.length > 4) {
            this.labels.push(trimmedFeature);
          }
        }

        end = curFeature.search('\]');
        key = curFeature.substr(start, (end - start));

        trimmedFeature = trimmedFeature + '_' + key;

        if (trimmedFeature.length > 4) {
          this.labels.push(trimmedFeature);
        }

      }
    }
  }
答案

以下正则表达式应该做你想要的。运行下面的代码段以查看其中的使用情况。

^[^_]*_([^<]*)<([^>]*)>[^[]*[([^]]*)]
  • ^在线的开头断言位置
  • [^_]*匹配除_之外的任何事情
  • _按字面意思对比
  • ([^<]*)捕捉除<之外的任何角色任意次数到捕获组1
  • <按字面意思对比
  • ([^>]*)捕捉除>之外的任何角色任意次数进入捕获组2
  • >按字面意思对比
  • [^[]*匹配除[之外的任何角色
  • [字面上匹配[
  • ([^]]*)捕捉除]之外的任何角色任意次数进入捕获组3
  • ]按字面意思对比

const r = /^[^_]*_([^<]*)<([^>]*)>[^[]*[([^]]*)]/
const a = [
  'root<trace>.D_seasonality<trend>.D_poly[poly0]',
  'root<trace>.D_seasonality<trend>.D_poly[poly2]',
  'root<trace>.D_seasonality<seasonality>.F_spectral_entropy[spectral_entropy]'
]

a.forEach(function(s) {
  m = r.exec(s)
  console.log(`Hover: ${m[1]}_${m[2]}_${m[3]}`)
  console.log(`Label: ${m[3]}`)
})

以上是关于Highcharts悬停xAxis标签的独特价值的主要内容,如果未能解决你的问题,请参考以下文章

图例与 Highcharts 中 xAxis 上的列刻度不匹配

Highcharts 十字准线标签是传奇的背后

使用xaxis和yaxis的字母标签时的丑陋Highchart

Highcharts 图表删除类别(x 轴)上间隔中的现有刻度

热图值在Highcharts中萎缩

Plotly:如何使用 plotly express 自定义 xaxis 刻度标签?