fusioncharts 多系列条形图不使用动态类别和数据集呈现答案

【问题标题】：fusioncharts multi series bar chart does not render with dynamic categories and datasetsfusioncharts 多系列条形图不使用动态类别和数据集呈现
【发布时间】：2018-02-12 03:42:12
【问题描述】：

我是第一次使用 fusioncharts，但在使用动态类别和数据集渲染多系列条形图时遇到了问题。以下是我的代码：

FusionCharts.ready(function () {

getSentiCount(symbolInput);

var chartCategories1 = "[{'category': [";

for (var a = 0; a < sentiData.length; a++) {
    if(sentiData[sentiData.length - 1].totalcount == sentiData[a].totalcount) {
        chartCategories1 += "{'label':'" + bdateForm(sentiData[a].bdate) + "'}";
    } else {
        chartCategories1 += "{'label':'" + bdateForm(sentiData[a].bdate) + "'},";
    }
}

chartCategories1 += "]}]";

var chartData1 = "[{'seriesname': 'Negative','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "1") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "1") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Positive','data':[";


for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "3") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "3") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Neutral','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "2") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "2") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Unknown','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]}]";

 var chartProperties1 = {
          "caption": "Sentiment",
          "bgColor": "#ffffff",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "borderAlpha": "20",
            "canvasBorderAlpha": "0",
            "baseFontSize": "14",
            "usePlotGradientColor": "0",
            "plotBorderAlpha": "10",
            "showXAxisLine": "1",
            "showYAxisLine": "0",
            "showYAxisValues": "0",
            "xAxisLineColor": "#999999",
            "divlineColor": "#999999",
            "showAlternateHGridColor": "0",
          "paletteColors": "#2cb32b,#ff2602,#2786f7,#f9f70e",
          "manageResize": "1",
          "autoScale": "1"
        }

 function renderchart() {
        var contentSummaryChart1 = new FusionCharts({
            type: 'mscolumn2d',
            renderAt: "sentimentChart",
            width: "100%",
            height: "180",
            autoscale: "1",
            dataFormat: "json",
            dataSource: {
                "chart": chartProperties1,
                "categories": chartCategories1,
                "dataset": chartData1
            }

        });

         contentSummaryChart1.render();

    }

 renderchart();  

});

sentiData 是我通过 Ajax 调用获得的变量（sentiData 实际上是 getSentiCount(symbolInput) 函数的输出。我已将它们记录到控制台中，它们绝对不为空。我也检查过两者都非常仔细，而且它们的格式肯定是正确的。

这是 chartCategories1 的输出 - [{'category': [{'label':'08-31-2017'},{'label':'08-30-2017'},{'label': '08-28-2017'},{'label':'08-23-2017'},{'label':'08-22-2017'},{'label':'08-21-2017'} ,{'label':'08-16-2017'},{'label':'08-09-2017'},{'label':'08-08-2017'},{'label':'08 -07-2017'},{'label':'08-03-2017'},{'label':'08-02-2017'}]}]

这里是chartData1的输出 - [{'seriesname': 'Negative','data':[{'value':'0'},{'value':'0'},{'value': '0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value': '1'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'}]},{'seriesname ':'正','数据':[{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'} ,{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'} ,{'value':'0'},{'value':'1'},{'value':'0'}]},{'seriesname':'Neutral','data':[{'value ':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value ':'0'},{'value':'2'},{'value':'0'},{'value':'0'},{'value':'1'},{'value ':'0'},{'value':'4'}]},{'seriesname': '未知','data':[{'value':'2'},{'value':'1 '},{'value':'1'},{'value':'2'},{'value':'1'},{'value':'1'},{'value':'0 '},{'value':'0'},{'value':'1'},{'value':'0'},{'value':'0'},{'value':'0 '}]}]

如果数据随时可用并且我不需要 Ajax 调用来获取它（在 getSentiCount(symbolInput) 中），代码的外观如下：

FusionCharts.ready(function() {
var contentSummaryChart1 = new FusionCharts({
type: 'msbar2d',
renderAt: 'chart-container',
width: '100%',
height: '180',
dataFormat: 'json',
dataSource: {
  "chart": {
    "caption": "Sentiment",
    "bgColor": "#ffffff",
    "bgColor": "#ffffff",
    "showBorder": "0",
    "borderAlpha": "20",
    "canvasBorderAlpha": "0",
    "baseFontSize": "14",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "showXAxisLine": "1",
    "showYAxisLine": "0",
    "showYAxisValues": "0",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "showAlternateHGridColor": "0",
    "paletteColors": "#2cb32b,#ff2602,#2786f7,#f9f70e",

  },
  "categories": [{

    'category': [{
      'label': '08-31-2017'
    }, {
      'label': '08-30-2017'
    }, {
      'label': '08-28-2017'
    }, {
      'label': '08-23-2017'
    }, {
      'label': '08-22-2017'
    }, {
      'label': '08-21-2017'
    }, {
      'label': '08-16-2017'
    }, {
      'label': '08-09-2017'
    }, {
      'label': '08-08-2017'
    }, {
      'label': '08-07-2017'
    }, {
      'label': '08-03-2017'
    }, {
      'label': '08-02-2017'
    }]

  }],
  "dataset": [{
    'seriesname': 'Negative',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }]
  }, {
    'seriesname': 'Positive',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }]
  }, {
    'seriesname': 'Neutral',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '2'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '4'
    }]
  }, {
    'seriesname': 'Unknown',
    'data': [{
      'value': '2'
    }, {
      'value': '1'
    }, {
      'value': '1'
    }, {
      'value': '2'
    }, {
      'value': '1'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }]
  }]
}
}).render();
});

我尝试使用 feedData 方法（在窗口加载和单击 div 时），但这也不起作用。

有没有办法使用变量chartCategories1 和chartData1 来呈现这个图表？我不能使用静态值格式，因为每个资产都有不同的标签和值，因此每个窗口都会获得不同的值并显示不同的图表。

【问题讨论】：

停下来。这绝对不是您在 javascript 中创建 json 对象的方式。你已经有一个数组sentiData。 javascript中有扩展方法来过滤数据并获取您想要的json。只需发布sentiData 的样例，并说明您正在尝试做什么。

标签： fusioncharts

【解决方案1】：

我发现我做错了什么。用户 adiga 是对的，我没有以正确的方式创建 JSON 对象。以下是我最终做的：

var dataJSON = {

                "chart": {
                "caption": "Sentiment",
                "bgColor": "#ffffff",

                "showBorder": "0",
                "borderAlpha": "20",
                "canvasBorderAlpha": "0",
                "baseFontSize": "14",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "showXAxisLine": "1",
                "showYAxisLine": "0",
                "showYAxisValues": "0",
                "showXAxisValues": "0",
                "showLabels": "1",
                "xAxisLineColor": "#999999",
                "divlineColor": "#999999",
                "showAlternateHGridColor": "0",
                "paletteColors": "#ff2602,#2cb32b,#2786f7,#f9f70e"
              },
              "categories": [{

                "category": []

              }],
              "dataset": [{
                "seriesname": "Negative",
                "data": []
              }, {
                "seriesname": "Positive",
                "data": []
              }, {
                "seriesname": "Neutral",
                "data": []
              }, {
                "seriesname": "Unknown",
                "data": []
              }]
            };

        for (var a = 0; a < sentiData.length; a++) {
            dataJSON.categories[0].category.push({label: bdateForm(sentiData[a].bdate)});
        }

        for (var e = 0; e < sentiData.length; e++) {
                if(sentiData[e].avgsentimentvalue == "1") {
                    dataJSON.dataset[0].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[0].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "3") {
                    dataJSON.dataset[1].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[1].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "2") {
                    dataJSON.dataset[2].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[2].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "") {
                    dataJSON.dataset[3].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[3].data.push({value: 0});
                }

            }

        FusionCharts.ready(function() {
            var topStores = new FusionCharts({
                type : 'mscolumn2d',
                renderAt : 'sentimentChart',
                width : '100%',
                height : '180',
                dataFormat : 'json',
                dataSource : dataJSON

            }).render();
        });

现在我的图表正在渲染，但 x 轴值未显示在表格下方。不过这是另一个问题，而且并不重要，所以我要关闭它。

阿迪加，感谢您的帮助！

【讨论】：