Question

这是一个针对 everviz/highcharts 的问题...

我是 Everviz 的新手，对 javascript 知之甚少，但我正在尝试格式化工具提示以反映我的 Everviz 表中的所有数据，但我似乎只能在任何时候显示两个类别之一（如屏幕截图所示）- 有没有一种方法可以构建一个工具提示，将百分比作为下面自己行中的百分比（例如：14%），有没有一种方法可以做到这一点，并且可以与其他数据一起使用？

这是这个图表的代码（注释是我试图理解代码的尝试，因为我几乎没有知识）



Highcharts.merge(true, options, {
  
/* CHART HEADER TITLE */  
    "title": {
    "text": "Xxxxxxxxx",
    "align": "Left",
    "x": 70,
    "style": {
      "fontFamily": "Lato",
      "color": "#000",
      "fontSize": "18px",
      "fontWeight": "bold",
      "fontStyle": "normal"
    },
    "useHTML": true
  },

  
  /* SUB HEADER / STRAPLINE */
  "subtitle": {
    "text": "Xxxxxxx",
    "align": "left",
    "x": 70,
    "style": {
      "color": "#666666",
      "fontFamily": "Lato",
      "fontSize": "12px"
    },
    "useHTML": true
  },
  
  
  
  "plotOptions": {
    "series": {
      "allowPointSelect": true,
      "states": {
        "select": {
          /* selected slice colour */
          "color": "#eda647",
          "borderColor": "black" /* */,
          "dashStyle": "dot"
        }
      },
     
      "label": {
        "enabled": false
      },

      
      
 /* SHOW CHART DATA LABELS
 =================================================*/
      "dataLabels": {
        "enabled": true,
        "color": "#333333"
      },
      "stacking": "normal",
      "animation": false
    }
  },

  
  
  
  
  
  
  
  /* CHART DATA
  ================================================*/
  
  "data": {
     /* Retrieval of table header row data ( "csv":... ), followed by the xAxis data and the associated  values in that column ( 3 column example: \n2013;2013;#;#;#) */
  "csv": "\"Economy\";\"Operating assets\";\"Percent\"\n\"SERBIA\";189;14.8\n\"EGYPT\";179;14\n\"TURKEY\";93;7.2\n\"TUNISIA\";76;6\n\"GEORGIA\";75;5.8\n\"BULGARIA\";63;4.9\n\"UZBEKISTAN\";62;4.8\n\"KAZAKHSTAN\";59;4.6\n\"ROMANIA\";55;4.3\n\"BELARUS\";52;4\n\"UKRAINE\";48;3.8\n\"MOROCCO\";41;3.2\n\"LATVIA\";38;3\n\"ARMENIA\";32;2.5\n\"KYRGYZ REPUBLIC\";32;2.5\n\"MOLDOVA\";30;2.3\n\"POLAND\";27;2.1\n\"MONGOLIA\";27;2.1\n\"BOSNIA AND HERZEGOVINA\";23;1.8\n\"KOSOVO\";20;1.6\n\"CROATIA\";18;1.4\n\"NORTH MACEDONIA\";17;1.4\n\"JORDAN\";11;0.8\n\"TAJIKISTAN\";6;0.5\n\"ALBANIA\";3;0.3\n\"AZERBAIJAN\";2;0.1",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false,
    "seriesMapping": [
      {
        "x": 0,
        "y": 1,
        "label": 2
      },
    
    ]
  },

  
  
  
  
  
  
  
  
  
  
  /* CANDIDATE for removal

  "chart": {
    "type": "column",
    "polar": false,
    "style": {
      "fontFamily": "Lato",
      "fontSize": "12px"
    }
  },
  

  

  /* CHART TYPE PER COLUMN OF DATA 
  ================================================*/
  "series": [
    {
      "turboThreshold": 0,
      /*first colour in the 'APPEARANCE'tab array of colours */
      "_colorIndex": 0,
      "_symbolIndex": 0,
      /* custom index colour - will default to array order if no value is assigned */
      "color": "",

      
/*  Reflect the values of referenced column in 'series'*/
      "tooltip": {
        "pointFormat": "{series.name}: <b>€{point.y} million</b><br>",

        "valueDecimals": 1
      },
      
      
/* PRIMARY CHART TYPE DECLEARED HERE..(LINE/COLUMN, BAR etc ..)
==================================================*/
      "type": "pie"
    },
   

  ],
  
/* CHART LEGEND
================================================*/
  "legend": {
    "enabled": false,
    "verticalAlign": "bottom",
    "layout": "horizontal",
    "floating": false
  },
 
 
  
/* COLOURS ASSIGNED ( FROM THE AR_SR CHART COLOUR SUITE ) 
  TO THE CHART AS SEEN IN THE 'APPEARANCE'tab  */  
    "colors": [
    "#20536A",
    "#3487AB",
    "#A5D1E4",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    "#DFDFDF",
    
    /* AR_SR CHART COLOUR SUITE VALUES
    =====================================
    
    B1 "#20536A",
    B2 "#3487AB",
    B3 "#A5D1E4",
    O1 "#C95717”,
    O2 "#D67311”,
    O3 "#EDA647”,
    O4 "#F6CE9B”,
    R1 "#B53260”,
    R2 "#D5678E”,
    G1 "#3F3F3F”,
    G2 "#454545”,
    G3 "#9D9D9C”,
    G4 "#CCCCCC”,
    G5 "#DFDFDF"  
    
    */
      
     
  ],
  

});

Answer 1

我赞赏你尝试自己解决这个问题的努力，我会给你解决方案，然后是解释：

Highcharts.merge(true, options, {
  "tooltip": {
    "useHTML": true,
    "formatter": function () {
      return `<small>${this.point.name}</small>
             <br>${this.series.name}: <b>€${this.y} million</b>
             <br>Percentage: <b>${Math.round(this.percentage)}%</b>`
    },
    // Insert the rest of your config here
});

做什么

我做的第一件事是跳上 Google 并搜索诸如“Highcharts 工具提示内容”之类的内容，然后我找到了一个论坛帖子以及它的内容：documentation，特别是 #formatting 位。

这告诉我们需要将 tooltip.formatter 与函数 ^1 一起使用，以返回我们想要的内容。不幸的是，我们不能使用富文本编辑，但我们知道 HTML，所以这无关紧要。所以我们声称内容看起来像这样

<small text>
  {point.name}<- put the name of the thing here
<end small text>
{series.name}: <bold>€{y} million<end bold>
Percentage: <bold>{percentage}%</bold>

使用 JavaScript 使其动态化

注意到我在这里稍微改变了格式吗？您看到的大部分噪音是因为我们需要一种方法来判断存在的值是什么，以及我们想要替代的值是什么。所以当我们说 ${this.series.name} 或 {series.name} 时，我们不是字面意思，我们的意思是替换 { 和 } 里面的内容——前者是 JS 的方式想要它，即使它更丑陋。 this 只是您需要引用函数中的值的东西。

用 HTML 格式化

括号内的值也在输出中被替换，但不是作为值，而是具有一种具有风格副作用的含义。

将这些片段与 JavaScipt 对象组合在一起

对象只是键和值，以标准方式编写："key": value，并用逗号分隔，注意值可以是它自己的键和值的集合！

一句话是什么？

还有一些事情我会简单地解释一下：

Highcharts.merge(true, options, {...} 表示将默认 Highcharts 配置 options 与您在 {...} 中指定的值合并。
useHTML 表示使用 HTML 而不是 SVG 呈现文本，这意味着您可以使用 <small>。
<small> 是用于小文本的 HTML 元素，同样是用于粗体文本的 <b> 和 <br/> 一个新行。
Math.round 是四舍五入的百分比，因为开箱即用它看起来像 3.141592653589793238462643——我们只是说 3。
可以阅读有关 here on MDN 的函数。

脚注

我们的函数不接受一个值作为输入，它总是返回相同的东西。这意味着它不需要是一个函数，您可以将 return 之后的内容视为唯一重要的部分。

everviz 的格式化工具提示

1 个答案: