React Fusion 图表 - 注释标签样式不起作用

Question

我正在尝试为图表类型世界的注释设置标签样式，tooltext 中的样式是可能的并且我能够自定义它，但是当我尝试这样做时它会呈现所有 html 作为字符串。令人惊讶的是 </br> 标签在标签上确实有效。下面是我想要实现的示例

我想把标签中第一行的字体变大加粗。以下是我试图在 -

中修复的部分代码

"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

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

作为解决方法，您可以在所需位置使用文本注释，它支持设置字体颜色、字体大小和字体粗体。示例 fiddle 供参考： 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();
});

React Fusion 图表 - 注释标签样式不起作用

React Fusion Charts - Annotation label styling doesn't work

reactjs

html

google-maps

fusioncharts