FusionCharts 无法在同一数据源上绘制不同的图表

debugcn 发表于 Dev

纳齐尔·艾哈迈德

我的要求是根据网络服务响应动态绘制图表chartType，该响应是特定格式的，dataSet但 FusionChart 未能做到这一点。

在下面的示例中，让我们假设所有图表类型（例如（线、列、堆积等））的数据集格式都相同，但是当我更改图表类型时，它显示无可用数据

*注意：我在 HighCharts 中取得了同样的成绩，但我的客户被迫使用融合图表

export const getChartOptions = (chartOptions) => {
    return {
        chartConfig: {
            type: chartOptions.type,
            dataFormat: chartOptions.dataFormat,
        },
        dataSource: {
            chart: {
                caption: chartOptions.caption,
                subCaption: chartOptions.subCaption,
                xAxisName: chartOptions.xAxisName,
                yAxisName: chartOptions.yAxisName,
                numberSuffix: chartOptions.numberSuffix,
                theme: chartOptions.theme,
                showLegend: '1'
            },
            categories: [
                {
                    category: [{
                        label: 'Q1'
                    }, {
                        label: 'Q2'
                    }, {
                        label: 'Q3'
                    }, {
                        label: 'Q4'
                    }]
                }
            ],
            dataset: [{
                seriesname: 'Last Year',
                data: [{
                    value: 10000
                }, {
                    value: 11500
                }, {
                    value: 12500
                }, {
                    value: 15000
                }]
            }]
        }
    };
};

Zapdos13

FusionCharts 为单系列和多系列图表提供了一些规定的数据格式，对于单系列图表，您需要像这样的数据 data:[{label:"mylabel"},{value:123}]

同样，对于多系列图表，您需要有包含 x 轴标签的类别对象和包含每个系列的多个数据对象的数据集对象

提示：如果要使用现有数据源绘制列/线图，请将图表类型设置为 mscolumn2d OR msline

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      chart: {

        showLegend: '1'
      },
      categories: [{
        category: [{
          label: 'Q1'
        }, {
          label: 'Q2'
        }, {
          label: 'Q3'
        }, {
          label: 'Q4'
        }]
      }],
      dataset: [{
        seriesname: 'Last Year',
        data: [{
          value: 10000
        }, {
          value: 11500
        }, {
          value: 12500
        }, {
          value: 15000
        }]
      }]
    }
  }).render();
});

演示 - http://jsfiddle.net/tz0orfkq/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。