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

Question

我有一个 JSON 对象，其中包含 数组数据 ，其中包含我要用于生成图表的数据。我想使用类别格式将 data1 数组用于 x 轴。我该怎么做？

这是我尝试的方法，即将 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>

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

Use array from JSON for category axis in c3.js

javascript

json

c3.js