反应融合图表 - 译注标签样式不起作用

Question

我想风格标签的图表类型世界注释，在tooltext造型是可能的，我能够但是定制它，当我尝试做同样的它呈现所有HTML作为字符串。令人惊讶的</br>标签不标签上工作。下面是我想achieve样本

我要让第一线大和大胆的在标签的字体。下面是代码，我试图在修复部分 -

"items":
            [
              {
                "id": "na",
                "shapeid": "circle",
                "x": "150.14",
                "y": "150.9",
                "label": this.state.na + '<br>' + this.state.nadiff,
                "tooltext": `<table className='table'>
                <thead>
                  <th>State</th>
                  <th>Total Sales</th>
                </thead>
                <tbody>
                  ${this.state.naDrilDown.map(row => {
                  return `<tr key={row.id}>
                              <td component="th" scope="row">
                                  ${row.state}
                              </td>
                              <td>
                                ${this.formatCurrency(row.value)}
                              </td>
                            </tr>`
                  })}
                </tbody>
                </table>`,
                "labelpos": "top"
              }]

关于这个问题的进一步的细节可以检查here

Answer 1

截至目前设定的部分字体配置文本在工具提示支持。同样是不可能的标签，标记或标签或文本注释。

作为变通，你可以使用文本注释，在你需要的位置，支持字体颜色，字体大小和字体加粗的设置。参考样本小提琴：http://jsfiddle.net/cf32emsy/1/

FusionCharts.ready(function() {
var wrCoverage = new FusionCharts({
type: 'world',
width: '600',
height: '500',
dataFormat: 'json',
renderAt: 'chart-container',
dataSource: {
  "chart": {
    "caption": "",
    "subcaption": "",
    "numbersuffix": "",
    "includevalueinlabels": "0",
    "labelsepchar": "",
    "markerBgColor": "#843cf7",
    "markerFontSize": "18",
    "markerFontColor": "#FF0000",
    "markerRadius": "10",
    "labelColor": "#000000",
    "showMarkerLabels": "1",
    "showMarkerLabelsfillcolor": "#0000b3",
    "entityfillhovercolor": "#38b8f2",
    "theme": "fusion"
  },
  "annotations": {
    "groups": [{
      "id": "Av Item",
      "items": [{
          "id": "cs",
          "type": "text",
          "fillcolor": "#0075c2",
          "label": "Global Total Sales Past 30 Days",
          "x": "45",
          "y": "380",
          "color": "000000",
          "align": "left"
        },
        {
          "id": "cs",
          "type": "text",
          "fillcolor": "#FF0000",
          "fontSize": "20",
          "text": "Annotations text",
          "x": "230",
          "bold": "1",
          "y": "400",
          "color": "000000",
          "align": "right"
        },
        {
            "type": "text",
          "text": "This is the first line",
          "fillcolor": "#0000FF",
          "fontSize": "20",
          "bold": "1",
          "x": "140",
          "y": "164"
        }
      ]
    }, ],
  },
  "markers": {
    "items": [{
      "id": "na",
      "shapeid": "circle",
      "x": "150.14",
      "y": "150.9",
      "label": "This is marker label",
      "tooltext": "Custom tooltip",
      "labelpos": "top"
    }]
  }
}
}).render();
});