HTML 在融合图表标题和副标题上

Question

我一直在尝试将 HTML 标签和角色添加到 融合图表 Caption 和 subCaption 但无法执行。

这个documentation link and also tried an old one的方法我试过了，还是不行。

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>

Answer 1

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>

Answer 2

我唯一能想到的（没有过多地扰乱源代码）是附加一个事件处理程序并添加你的 HTML。

这是我的计划：

1. 渲染字幕时会触发一个事件 - rendered
2. 从计算的元素中获取副标题的位置。
3. 创建 foreignObject 以存储和附加您的 HTML。
4. 使用图表选项填充 HTML 内容和一些其他快速设置：

这是代码（它又快又脏，但它完成了工作:)

JSFiddle Example

    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();
});