HTML на фьюжн-карте Подпись и подзаголовок - PullRequest
Новая
       91

HTML на фьюжн-карте Подпись и подзаголовок

3 голосов
/ 20 февраля 2020

Я пытался добавить HTML теги и символы к диаграмме слияния Caption и subCaption, но не смог выполнить.

Я попробовал метод в этом документация ссылка , а также попытался старый , но он также не работает. 

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": ""Quarterly Revenue",
          "subCaption": "<span> Last year </span>",
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          //Caption cosmetics 
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#993300",
          "subcaptionFontBold": "0",
          //Theme
          "theme": "fusion"
        },
        "data": [{
          "label": ""Q1",
          "value": "1950000"
        }, {
          "label": "" Q2",
          "value": "1450000"
        }, {
          "label": "Q3",
          "value": "1730000"
        }, {
          "label": "Q4",
          "value": "2120000"
        }]
      }
    })
    .render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>



<div id="chart-container">FusionCharts will render here</div>

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

Единственное, о чем я могу подумать (не слишком связываясь с источником), это присоединить обработчик событий и добавить свой HTML.

Вот как я это планировал:

  1. При отображении подписей запускайте evevnt - rendered
  2. Получите позицию вложенного заголовка из вычисляемого элемента.
  3. Создайте foreignObject, чтобы сохранить и добавить свой HTML .
  4. Используйте параметры диаграммы для заполнения содержимого HTML и некоторые другие быстрые настройки:

Вот код (он быстрый и грязный, но он выполняет свою работу :)

Пример JSFiddle 

    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      // Attach event handlers
      events: {
        // Attach to beforeRender
        "rendered": function(eventObj, argsObj) {
          console.log(this);
          let $caption = $(eventObj.sender.container).find("g[class$=-caption]");
          let $subcaption = $caption.find("text").eq(1);
          //Create a foreign element - that will render inside SVG:
          let foreign = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
          //Html subCaption is derived from the options:
          let subCaption = $(this.args.dataSource.chart.subCaption);
          //Set foreign attributes - should be set forceCaptionAttr: 
          foreign.setAttribute("x", $subcaption.attr("x"));
          foreign.setAttribute("y", $subcaption.attr("y"));
          foreign.setAttribute("style", $subcaption.attr("style"));
          $.each(this.args.dataSource.chart.forceCaptionAttr, function(key, value) {
            switch (key) {
              case "offsetX":
                foreign.setAttribute("x", parseInt($subcaption.attr("x")) + value);
                break;
              case "offsetY":
                foreign.setAttribute("y", parseInt($subcaption.attr("y")) + value);
                break;
              default:
                foreign.setAttribute(key, value);
                break;
            }

          });
          //Remove SVG text element:
          $subcaption.remove();
          //Append the subcaption to foreign:
          foreign.appendChild(subCaption[0]);
          //Append to Caption svg container:
          $caption[0].appendChild(foreign);
        }
      },
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "\"Quarterly Revenue\"",
          "subCaption": "<strong>I'm Displaying HTML in SVG &#128540;</strong></span>",
          // the intial values are taken from the text svg -> this wil change the values so u can fix some positioning issues:
          "forceCaptionAttr": {
            offsetX: -100,
            offsetY: -10,
            width: 250,
            height: 30
          },
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#fff",
          "subcaptionFontBold": "0",
          "theme": "fusion"
        },
        "data": [{
            "label": "\"Q1\"",
            "value": "1950000"
          },
          {
            "label": "\"Q2\"",
            "value": "1450000"
          },
          {
            "label": "\"Q3\"",
            "value": "1730000"
          },
          {
            "label": "\"Q4\"",
            "value": "2120000"
          }
        ]
      }
    })
    .render();
});
0 голосов
/ 21 февраля 2020

Содержимое caption и subcaption рассматривается как string.

Пожалуйста, посмотрите на образец ниже. Надеюсь, это ваш желаемый результат - 

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "\"Quarterly Revenue\"",
          "subCaption": "<span>Last year</span>",
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          "captionFont": "Arial",
          "captionFontSize": "18",
          "captionFontColor": "#993300",
          "captionFontBold": "1",
          "subcaptionFont": "Arial",
          "subcaptionFontSize": "14",
          "subcaptionFontColor": "#993300",
          "subcaptionFontBold": "0",
          "theme": "fusion"
        },
        "data": [
          {
            "label": "\"Q1\"",
            "value": "1950000"
          },
          {
            "label": "\"Q2\"",
            "value": "1450000"
          },
          {
            "label": "\"Q3\"",
            "value": "1730000"
          },
          {
            "label": "\"Q4\"",
            "value": "2120000"
          }
        ]
      }
    })
    .render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>



<div id="chart-container">FusionCharts will render here</div>
...