Гистограмма с несколькими сериями 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 (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 '}]}]

Вот вывод диаграммыData1 - [{'seriesname': 'Negative', 'data': [{'value': '0'}, {'value': '0'}, {'value': '0] }, {'значение': '0'}, {'значение': '0'}, {'значение': '0'}, {'значение': '0'}, {'значение': '1' }, {'value': '0'}, {'value': '0'}, {'value': '0'}, {'value': '0'}]}, {'seriesname': ' Положительный ',' данные ': [{' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' value ':' 0 '}, {' value ':' 1 '}, {' value ':' 0 '}]}, {' seriesname ':' Neutral ',' data ': [{' value ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 2 '}, {' значение ':' 0 '}, {' значение ':' 0 '}, {' значение ':' 1 '}, {' значение ':' 0 '}, {' value ':' 4 '}]}, {' seriesname ':' Unknown ',' data ': [{' value ':' 2 '}, {' value ':' 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? Я не могу использовать формат статических значений, потому что у меня разные метки и значения для каждого актива, поэтому каждое окно будет получать разные значения и отображать разные диаграммы.


fusioncharts
person msmarkova    schedule 03.09.2017    source источник
comment
Просто перестань. Совершенно не так, как вы создаете объекты json в javascript. У вас уже есть массив sentiData. В javascript есть методы расширения для фильтрации данных и получения желаемого json. Просто опубликуйте образец того, как sentiData выглядит, и укажите, что именно вы пытаетесь сделать.   -  person adiga    schedule 08.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Я понял, что делаю не так. Пользователь Адига был прав, я неправильно создавал объект 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 не отображаются под таблицей. Но это еще одна проблема, и она не критична, поэтому я закрываю ее.

Адига, спасибо, что попытались помочь!

person msmarkova    schedule 16.09.2017