在c3.js中使用JSON中的数组作为类别轴-Java 学习之路

我有一个包含 array datas 的JSON对象，它包含我想用来生成图表的数据 . 我想使用类别格式将 data1 数组用于x轴 . 我怎样才能做到这一点？

这就是我尝试过的，它将数据从JSON对象复制到字符串中：

chsrt script

var datas={"data1":["a","b"],"data2":["10","20"]};
                 // this come from ajax
                var out ="";
                for(var i=0;i<datas.data1.length;i++){
                 var out = datas.data1[i];
                
                }
            alert(out);
    var chart = c3.generate({
    bindto: '#chart',
           size: {
            height: 450,
           },
        data: {
            columns: [
             ['data1', 30, 200, 100, 400, 150, 250],
             ['data2', 50, 20, 10, 40, 15, 25]            
                ],
            type: 'line',
            },
            color: {
            pattern: ['#80B5EC', '#2A2A2E', '#FC8D2D', '#3FE51D', '#F51E50', '#F5D81E', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
        },
            zoom: {
            enabled: true
        },
        axis: {
            x: {
                type: 'category',
                tick: {
                   
                    multiline: false
                },
                
                categories: [out],
                  height: 100
            },y: {
    
                label:{ 
                text:'TASKS',
                position: 'outer-middle'
            }
            }
    
        },
        grid:{
            y:{
                show:true
            }
        }
    });
    
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.js"></script>
<div id="chart"></div>

alert out put is:

a,b

如果我在c3.js对象中使用i var out 它会像 "a,b" 或 ['a,b'] 那样在c3.js对象中得到这个值 . chart out put image here

1 回答

这是您的代码的简化清理版本 . 您将看到可以从JSON对象中引用data1变量，而无需提取数据 .

你的JS在for循环中做了什么是将data1数组的值赋给一个字符串，导致函数内置的Array.toString（）触发并将数组成员连接成一个字符串 . 网上有很多关于如何复制数组的例子 . 但是，正如我所说，您不需要这样做，因为您可以直接从JSON对象访问数组 .

编辑：该片段已被修改为更具代表性的样本，其中要绘制的数据集在JSON内传递 . 这里我们使用Array.unshift将数据集名称放入列数组中 .

var data = {"datapts":["a","b","c","d","e","f"], "data1": [30, 200, 100, 400, 150, 250]};

// Arr,ay.unshift inserts an entry at the start of an array.
data.data1.unshift('data1');

var chart = c3.generate({
    data: {
        columns: [
         data.data1
        ],
        type: 'line'
	  },
    axis: {
        x: {
            type: 'category',
            categories: data.data1
       }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>
<div class='wrapper'  style='height: 450px;'>
<div id="chart"></div>
</div>

回复于 2024-05-17T12:49:10+08:00

在c3.js中使用JSON中的数组作为类别轴

1 回答

相关问题