c3 js图表上的动态数据

时间:2019-08-14 17:12:31

标签: javascript c3.js

我正在尝试将数据动态加载到C3图表中。

我有一个AJAX呼叫,响应如下:

{"codigo":1,"nVisits":3,"visit1Date":"2019-08-14","visit2Date":"2019-08-13","visit3Date":"2019-08-11","visit4Date":"","PE_1":2,"PM_1":0,"PE_2":0,"PM_2":0,"PE_3":0,"PM_3":0,"PE_4":0,"PM_4":0}

nVisits当前具有 3 ,但可以是 0到4 之间的任意数字 nVisits是从SQL SELECT中获取的访问总数,但仅限于最后4个结果。

我想将这些数据放在图表上

我目前正在尝试使用这样的解决方案:

if (response.nVisits == 3) {
      var evolution = c3.generate({
        bindto: "#evolutionChart",
        point: { 
            r: 4 // the size of the dot on the chart  
        },
        color: {
            pattern: ['red', 'blue']
        },
        size: { height: 300 },
        data: {
            x: 'x',
            columns: [
                ['x',  response.visit3Date, response.visit2Date, response.visit1Date],
                ['PE', response.PE_3, response.PE_2, response.PE_1],
                ['PM', response.PM_3, response.PM_2, response.PM_1],
            ],
            type: 'line'
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        },
        grid: {
            y: {
                show: true
            }
        }
      });
    }

因此,我正在检查响应的 nVisits ,并为每种可能的组合构建不同的图表。 (不是很好的解决方案,没关系,因为我只有5个可能的组合 0,1,2,3,4 ),但是我想填充

columns: [
                    ['PE', response.PE_2, response.PE_1],
                    ['PM', response.PM_2, response.PM_1],
                ],

基于nVisits的不同数据

有什么不同的方法吗?

0 个答案:

没有答案