代码之家 › 专栏 › 技术社区 › Jeet

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

fusioncharts google-maps html5 reactjs

0

Jeet · 技术社区 · 7 年前

我正在尝试为图表类型世界的注释设置标签样式,在 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

1 回复 | 直到 7 年前

1

3

Akash 7 年前

到目前为止,工具提示中支持为文本设置部分字体配置。对于标签、标记标签或文本批注,这是不可能的。

作为解决方案,您可以在所需位置使用文本注释,它支持字体颜色、字体大小和字体粗体的设置。参考样板: 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();
});