React Fusion Charts - стиль меток-аннотаций не работает - PullRequest
Новая
       12

React Fusion Charts - стиль меток-аннотаций не работает

0 голосов
/ 30 января 2019

Я пытаюсь стилизовать метку для аннотаций мира типа диаграммы, возможно стилевое оформление в tooltext, и я смог настроить его, однако, когда я пытаюсь сделать то же самое, он отображает весь HTML как строку.Удивительно, но тег </br> работает на этикетке.ниже приведен пример того, чего я хочу достичь enter image description here

Я хочу сделать шрифт первой строки больше и жирнее на этикетке.Ниже приведена часть кода, которую я пытаюсь исправить - 

"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"
              }]

Более подробную информацию об этой проблеме можно проверить здесь

1 Ответ

0 голосов
/ 04 февраля 2019

На данный момент настройка частичной настройки шрифта для текстов поддерживается во всплывающей подсказке.То же самое невозможно для меток, меток маркеров или текстовых аннотаций.

В качестве обходного пути вы можете использовать текстовые аннотации в нужной вам позиции, которая поддерживает настройку цвета шрифта, размера шрифта и полужирного шрифта.Образец скрипки для справки: 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();
});
...