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

Question

我有一个包含数组数据的 JSON 对象，其中包含我想要用来生成图表的数据。我想使用类别格式的 x 轴 data1 数组。我怎样才能做到这一点？

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

chsrt 脚本

   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>

警报输出是:

a,b  

如果我在 c3.js 对象中使用这个var out，我认为它会像 "a,b" 或 ['a,b' ]我如何在 c3.js 对象中获取这个值。 chart out put image here

Answer 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>