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 ，我会发现它像"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中的类别轴

1 个答案: