解决FusionCharts联动钻取图表显示‘无数据可展示’错误

尝试使用FusionCharts的Linked Charts功能实现点击父图表加载钻取图表，但点击父图表后出现「no data to display」提示，期望点击父图表能正常加载子图表。

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        //Showing the Cumulative Sum of stacked data
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          }         
          
        ]
      }],       
      "dataset": [{
          "seriesname": "Food Products",
          "data": [{
              "value": "11000",
               "link": "newchart-json-test",
               
            }      
          ],
            
           
        },
        {
          "seriesname": "Non-Food Products",
          "data": [{
              "value": "11400",             
            }                       
          ]
        }
      ],
       "linkeddata": [{
                    "id": "test",
                    "linkedchart": {
                        "chart": {
                            "caption": "Fodd Products - Quarterly Sales",
                            "subcaption": "Last year",
                            "numberprefix": "$",
                            "theme": "fusion",
                            "rotateValues": "0",
                            "plottooltext": "$label, $dataValue,  $percentValue"
                        },
                        "data": [{
                            "label": "Q1",
                            "value": "157000"
                        }, {
                            "label": "Q2",
                            "value": "172000"
                        }, {
                            "label": "Q3",
                            "value": "206000"
                        }, {
                            "label": "Q4",
                            "value": "275000"
                        }]
                    }
                }],
   
      
    }
  }).render();
});

出现「no data to display」的核心原因是代码中使用了HTML转义字符"替代标准双引号，导致FusionCharts无法正确解析JSON数据源。此外还有一处拼写错误，修正步骤如下：

• 替换HTML转义字符：将代码中所有的"替换为标准双引号"，JavaScript对象字面量需使用合法的引号格式，否则JSON结构解析失败，子图表无法获取正确数据。
• 修正拼写错误：将linkedchart标题中的"Fodd Products"改为"Food Products"，避免显示错误。
• 验证链接匹配：确保data中的link属性值newchart-json-test与linkeddata中的id: "test"完全匹配，这是父图表与子图表关联的关键标识。

修正后的完整代码：

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
          "label": "Q1"
        }]
      }],       
      "dataset": [{
        "seriesname": "Food Products",
        "data": [{
          "value": "11000",
          "link": "newchart-json-test"
        }]
      }, {
        "seriesname": "Non-Food Products",
        "data": [{
          "value": "11400"             
        }]
      }],
      "linkeddata": [{
        "id": "test",
        "linkedchart": {
          "chart": {
            "caption": "Food Products - Quarterly Sales",
            "subcaption": "Last year",
            "numberprefix": "$",
            "theme": "fusion",
            "rotateValues": "0",
            "plottooltext": "$label, $dataValue,  $percentValue"
          },
          "data": [{
            "label": "Q1",
            "value": "157000"
          }, {
            "label": "Q2",
            "value": "172000"
          }, {
            "label": "Q3",
            "value": "206000"
          }, {
            "label": "Q4",
            "value": "275000"
          }]
        }
      }]
    }
  }).render();
});

内容的提问来源于stack exchange，提问作者sandy