使用包含函数解析 JSON答案

【问题标题】：Parse JSON with containing function使用包含函数解析 JSON
【发布时间】：2015-11-19 09:58:59
【问题描述】：

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

<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');
            }
        }

【问题讨论】：

标签： javascript json d3.js

【解决方案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]。 values 数组的逻辑是一样的。

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

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');
                }
            }
        }
    });

同时，改进动态生成的字符串格式是一个好主意，以防万一，使其更加透明和清晰。

【讨论】：