HTML 在 Fusion Chart 标题和副标题中的应用

Question

我一直在试图将 HTML 标签和字符添加到 fusion chart 的 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>

- Jithin Raj P R

Answer 1

我所能想到的唯一办法（不需要太多更改源代码）是附加一个事件处理程序并添加您的HTML。

这是我的计划：

1. 当字幕被呈现时，触发事件 - 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();
});

- Shlomi Hassid

Answer 2

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>

- Arnab003

---

抱歉，不是这样的，我想要将“HTML”转换成一个元素。我需要它成为一个元素而不是像您的示例中那样成为文本。 - Jithin Raj P R

@weBBer 这里的标题和副标题文本是作为“SVG”文本元素呈现的，而不是“HTML”元素。因此，我认为目前无法实现。 - Arnab003

<tspan> 在 SVG 中可以在文本中使用，但在这种情况下仍然无法工作，我需要一种创建它的方法。 - Jithin Raj P R