Question

我第一次使用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）函数的输出。我已经将它们记录到控制台中，它们肯定不是null。我还检查过两者都非常仔细，它们的格式正确。

以下是chartCategories1的输出 - [{'category'：[{'label'：'08-31-2017'}，{'label'：'08-30-2017'}，{'label'： '08 -28-2017 '}，{' 标签 '：' 2017年8月23日 '}，{' 标签 '：' 2017年8月22日 '}，{' 标签 '：' 2017' 年8月21日} ，{ '标签'： '2017年8月16日'}，{ '标签'： '2017年8月9日'}，{ '标签'： '2017年8月8日'}，{ '标签'：“08 -07-2017 '}，{' 标签 '：' 2017年8月3日 '}，{' 标签 '：' 2017' 年8月2日}]}]

以下是chartData1的输出 - [{'seriesname'：'Negative'，'data'：[{'value'：'0'}，{'value'：'0'}，{'value'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '1'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}]}，{“SERIESNAME '：'正'，'数据'：[{'值'：'0'}，{'值'：'0'}，{'值'：'0'}，{'值'：'0'} ，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'} ，{'value'：'0'}，{'value'：'1'}，{'value'：'0'}]}，{'seriesname'：'中立'，'数据'：[{'值'：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值'：' 0 '}，{' 值 '：' 2 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 1 '}，{' 值'：'0'}，{'value'：'4'}]}，{'seriesname'：'未知'，'数据'：[{'值'：'2'}，{'值'：'1 '}，{' 值 '：' 1 '}，{' 值 '：' 2 '}，{' 值 '：' 1 '}，{' 值 '：' 1 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 1 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 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渲染此图表？我不能使用静态值格式，因为每个资源都有不同的标签和值，因此每个窗口将获得不同的值并显示不同的图表。

Answer 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轴值未显示在表格下方。这是另一个问题，而且并不重要，所以我要关闭它。

Adiga，感谢您的帮助！

fusioncharts多系列条形图不会使用动态类别和数据集进行渲染

1 个答案: