Question

我想创建一个这样的图表：

<script>
var chart = c3.generate(
    {
        data: {
            x: 'year',
            columns: [
                ['year', 1991, 1992, 1993, 1994, 1995, 1998],
                ['value', 1, -3, -6, -5, 2, -3]
                    ],
            type: 'bar',            
            labels: true,           
            color: function (color, d) {
                if(d.value < -1){
                    return d3.rgb('red');
                }
                else if(d.value >= -1 && d.value <= +1){
                    return d3.rgb('grey');
                }               
                else {
                    return d3.rgb('blue');
                }
            }
        }
    }
    );  

</script>

这很好用，但现在我想对不同的输入数据做同样的事情。我计划在这个最小的例子中做到这一点：

    <script>

    var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //shall be created automatically 
    var myValues = ', 1, -3, -6, -5, 2, -3'; //shall be created automatically 

    var textJSON = '{' +
            '"data": {' +
                '"x": "year",'  +
                '"columns": ['  +
                '   ["year"' + myYears +'],' +
                '   ["value"' + myValues +']' +
                '       ],' +
                '"type": "bar"' +
                '}' +
                '}' ;

    var c3JSON = JSON.parse(textJSON);
    var chart = c3.generate( c3JSON );   

    </script>

这也有效，但是当我尝试将不同颜色的规则添加到我的文本中时，它无法将其解析为JSON。

您知道如何将颜色函数插入到我的文本中以便将其正确解析为JSON吗？

        color: function (color, d) {
            if(d.value < -1){
                return d3.rgb('red');
            }
            else if(d.value >= -1 && d.value <= +1){
                return d3.rgb('grey');
            }               
            else {
                return d3.rgb('blue');
            }
        }

Answer 1

哦，您不需要使用连接手动将值转换为JSON字符串，然后将其解析回JS对象。它看起来真的很糟糕。

请执行以下操作：

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //shall be created automatically 
var myValues = ', 1, -3, -6, -5, 2, -3'; //shall be created automatically 

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';

var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

String.prototype.split函数将转换您的字符串

, 1991, 1992, 1993, 1994, 1995, 1998

通过“，”拆分数组，并生成以下数组：

["", "1991", "1992", "1993", "1994", "1995", "1998"]

由于您需要将列的名称指定为第一项（或其类别），因此您只需将其指定给yearsArray[0]即可。值数组的逻辑是相同的。

现在，您可以在代码中使用：

var myYears = ', 1991, 1992, 1993, 1994, 1995, 1998';  //shall be created automatically 
var myValues = ', 1, -3, -6, -5, 2, -3'; //shall be created automatically 

var yearsArray = myYears.split(', '); 
yearsArray[0] = 'year';
var valuesArray = myValues.split(', '); 
valuesArray[0] = 'value';

var chart = c3.generate({
        data : {
            x : 'year',
            columns : [
                yearsArray,
                valuesArray
            ],
            type : 'bar',
            labels : true,
            color : function (color, d) {
                if (d.value < -1) {
                    return d3.rgb('red');
                } else if (d.value >= -1 && d.value <= +1) {
                    return d3.rgb('grey');
                } else {
                    return d3.rgb('blue');
                }
            }
        }
    });

同时，最好改进动态生成的字符串格式，以便更加透明和清晰。

使用包含函数解析JSON

1 个答案: