fusioncharts多系列條形圖不使用動態類別和數據集進行渲染

我第一次使用fusioncharts，並且無法使用動態類別和數據集渲染多系列條形圖。下面是我的代碼：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（符號輸入）功能的輸出，我登錄他們到控制檯，它們是我們也非常仔細地檢查了它們，並且它們的格式都是正確的。

這裏是chartCategories1的輸出 - [{'category'：[{'label'：'08- 31-2017 '}，{' 標籤 '：' 2017年8月30日 '}，{' 標籤 '：' 2017年8月28日 '}，{' 標籤 '：' 2017年8月23日 '}，{'標籤 '：' 2017年8月22日 '}，{' 標籤 '：' 2017年8月21日 '}，{' 標籤 '：' 2017年8月16日 '}，{' 標籤 '：' 08-09- 2017 '}，{' 標籤 '：' 2017年8月8日 '}，{' 標籤 '：' 2017年8月7日 '}，{' 標籤 '：' 2017年8月3日 '}，{' 標籤」：'08 -02-2017'}]}]

以下是chartData1的輸出 - [{'seriesname'：'Negative'，'data'：[{'value'：'0'}，{'value'：'0'}，{'value' ： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值' ： '1'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}]}，{」系列名'：'正面'，'數據'：[{'value'：'0'}，{'value'：'0'}，{'value'：'0'}，{'value'：'0' }，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0'}，{ '值'： '0' }，{'value'：'0'}，{'value'：'1'}，{'value'：'0'}]}，{'seriesname'：'Neutral'，'data'：[{'值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{'值 '：' 0 '}，{' 值 '：' 2 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 1 '}，{'值'：'0'}，{'值'：'4'}]，{'seriesname'：'未知'，'data'：[{'value'：'2'}，{'value'：' 1 '}，{' 值 '：' 1 '}，{' 值 '：' 2 '}，{' 值 '：' 1 '}，{' 值 '：' 1 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 1 '}，{' 值 '：' 0 '}，{' 值 '：' 0 '}，{' 值 '：' 0'}]}]

下面是代碼會是什麼樣子，如果數據是現成的，我並不需要一個Ajax調用得到它（在getSentiCount（符號輸入））：

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渲染這個圖表？我無法使用靜態值格式，因爲每個資產都有不同的標籤和值，所以每個窗口都會獲得不同的值並顯示不同的圖表。

來源

2017-09-03 msmarkova

只需停下來。這絕對不是您在javascript中創建json objetcs的方式。你已經有一個數組'sentiData'。在javascript中有擴展方法來過濾數據並獲得你想要的json。只要發佈一個'sentiData'看起來像什麼的樣本，並提及你正在嘗試做什麼。 – adiga

我弄清楚我做錯了什麼。用戶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，感謝您試圖幫助！

來源

2017-09-16 23:59:47 msmarkova

fusioncharts多系列條形圖不使用動態類別和數據集進行渲染

回答

相關問題