融合チャートキャプションとsubcaption上のHTML

ウェバー：

私が追加しようとしている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>

Shlomi Hassid：

私は（あまりソースいじりなし）と考えることができる唯一のことは、イベントハンドラをアタッチし、あなたのHTMLを追加することです。

ここで私はそれを計画する方法です。

1. キャプションはevevntは火をレンダリングしている場合 - rendered
2. 計算要素からsubcaptionの位置を取得します。
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();
});