Question

我一直在使用Jqwidgets来构建树图。有一个我感兴趣的特定示例代码。但我的问题是我不知道如何为树图中的每个子节点或块添加颜色。现在它的所有颜色都是不同的基色。

var data = [
    {
        "id": "2",
        "parentid": "1",
        "text": "Hot Chocolate",
        "value": "$5.2"
    }, {
        "id": "3",
        "parentid": "1",
        "text": "Peppermint Hot Chocolate",
        "value": "$4.0"
    }, {
        "id": "4",
        "parentid": "1",
        "text": "Salted Caramel Hot Chocolate",
        "value": "$2.4"
    }, {
        "id": "5",
        "parentid": "1",
        "text": "White Hot Chocolate",
        "value": "$2.5"
    }, {
        "text": "Chocolate Beverage",
        "id": "1",
        "parentid": "-1",
        "value": "$1.1"
    }, {
        "id": "6",
        "text": "Espresso Beverage",
        "parentid": "-1",
        "value": "$0.9"
    }, {
        "id": "7",
        "parentid": "6",
        "text": "Caffe Americano",
        "value": "$1.2"
    }, {
        "id": "8",
        "text": "Caffe Latte",
        "parentid": "6",
        "value": "$3.3"
    }, {
        "id": "9",
        "text": "Caffe Mocha",
        "parentid": "6",
        "value": "$2.5"
    }, {
        "id": "10",
        "text": "Cappuccino",
        "parentid": "6",
        "value": "$1.5"
    }, {
        "id": "11",
        "text": "Pumpkin Spice Latte",
        "parentid": "6",
        "value": "$1.6"
    }, {
        "id": "12",
        "text": "Frappuccino",
        "parentid": "-1"
    }, {
        "id": "13",
        "text": "Caffe Vanilla Frappuccino",
        "parentid": "12",
        "value": "$1.2"
    }];

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' }
    ],
    id: 'id',
    localdata: data
};

// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();


var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
$('#treemap').jqxTreeMap({
    width: 600,
    height: 600,
    source: records,
    baseColor: '#fa320a',
    renderCallbacks: {
        '*': function (element, data) {
            if (!data.parent) {
                element.css({
                    backgroundColor: '#fff',
                    border: '3px solid #000'
                });
            }
            else {
                var nThreshold = 105;
                var bgDelta = (data.rgb.r * 0.299) + (data.rgb.g * 0.587) + (data.rgb.b * 0.114);
                var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
                element.css({
                    color: foreColor
                });
            }
        }
    }
});

我该怎么做？

Answer 1

添加颜色＆＃39;具有不同十六进制代码的每个父对象的属性。

{
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "value": "$1.1",
    "color": '#95FF7A'
}

再添加一个具有名称的对象：＆＃39; color＆＃39;来源数据场阵列。

var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'value' },
        { name: 'color' }
    ],
    id: 'id',
    localdata: data
};

然后你可以看到每个块都有自己的色带。 http://jsfiddle.net/kn92gc1q/

如何在jqwidgets树图中更改子块的颜色

1 个答案: