Anychart 如何使用除值之外的不同参数进行排序和着色

我想根据值对树映射进行排序，但我需要根据数据中的字段更改设置颜色，但我没有找到任何解决方案。目前，这两件事都有价值

这是我的代码：

<script>
anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples/tree-map-charts/acme-products-by-revenue/data.json
    anychart.data.loadJsonFile('http://localhost:31066/hmdata.aspx', function (data) {
    // makes tree from the data for the sample
    var dataTree = anychart.data.tree(data, 'as-table');
    var chart = anychart.treeMap(dataTree);

    // sets title for chart and customizes it
    chart.title()
            .enabled(true)
            .useHtml(true)
            .padding([0, 0, 20, 0])
            .text(
                    'Top ACME Products by Revenue<br/>' +
                    '<span style="color:#212121; font-size: 13px;">(average sales during the year, in $)</span>'
            );

    // sets scale
    var scale = anychart.scales.ordinalColor([
        { less: 1000000},
        { from: 1000001, to: 2000000 },
        { from: 2000001, to: 3000000 },
        { from: 3000001, to: 4000000 },
        { from: 4000001, to: 5000000 },
        { greater: 5000001}
    ]);

    // sets colors for scale
    scale.colors(['#aa2121', '#c84040', '#ed7171', '#7ec17e', '#518651', '#215e2c']);

    // sets chart settings
    chart.padding([10, 10, 10, 20])
            // setting the number of levels shown
            .maxDepth(2)
            .selectionMode('none')
            .colorScale(scale)
            .hovered({fill: '#bdbdbd'});

    // enable HTML for labels
    chart.labels().useHtml(true);

    // configure labels
    chart.labels().format(function () {
        return "<div style='font-weight:bold;color:white;'>" + this.getData('name')                + "</div><br />" +
               "<div style='font-size:50%;font-weight:bold;color:white;'>" + this.getData('price') + "</div><br />" +
               "<div style='font-size:40%;color:white;'>" + this.getData('change')                 + " </div>" +
               "<div style='font-size:40%;color:white;'>(" + this.getData('pchange')               + "%)</div><br />" +
               "<div style='font-size:40%;color:white;'>" + anychart.format.number(Math.round(this.getData('value') / 100000) / 10, { groupsSeparator: ',' }) + " mn</div>";
    });

    // sets settings for headers
    chart.headers().format(function () {
        return this.getData('name');
    });
    chart.normal().headers().fontColor("#000000");
    chart.normal().headers().fontSize("6");
    chart.normal().headers().fontWeight('bold');
    chart.hovered().headers().fontColor("#000099");

    chart.labels().adjustFontSize(true);
    // sets settings for tooltip
    chart.tooltip()
            .useHtml(true)
            .titleFormat(function () {
                return '<span style="color: #ffffff;font-size:80%;">' + this.getData('name') + " - " + this.getData('companyname') + '</span>';
            })
            .format(function () {
                return '<span style="color: #ffffff;font-size:80%;">Price: ' +
                        anychart.format.number(this.getData('price'), { groupsSeparator: ',' }) +
                    '</span><br /><span style="color: #ffffff;font-size:80%;">Change: ' +
                        anychart.format.number(this.getData('change'), { groupsSeparator: ',' }) +
                    '</span><br /><span style="color: #ffffff;font-size:80%;">% Change: ' +
                        anychart.format.number(this.getData('pchange'), { groupsSeparator: ',' }) +
                    '%</span><br /><span style="color: #ffffff;font-size:80%;">Volume: ' +
                        anychart.format.number(this.value, { groupsSeparator: ',' }) + '</span>'
            });

    // set container id for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});
});
</script>

anychart.onDocumentReady（函数（）{
//本样本中使用的数据可以从CDN中获得
// https://cdn.anychart.com/samples/tree-map-charts/acme-products-by-revenue/data.json
anychart.data.loadJsonFile（'http://localhost:31066/hmdata.aspx，函数（数据）{
//从样本的数据生成树
var dataTree=anychart.data.tree（数据“作为表”）；
var chart=anychart.treeMap（dataTree）；
//设置图表标题并进行自定义
图表.标题（）
.已启用（真）
.useHtml（true）
.填充（[0,0,20,0]）
.文本(
“按收入划分的顶级ACME产品
”+
“（年内平均销售额，单位为美元）”
);
//设定比例
var scale=anychart.scales.ordinalColor([
{减去：1000000}，
{从：1000001到：2000000}，
{从：2000001到：3000000}，
{从：3000001到：4000000}，
{从：4000001到：5000000}，
{更大：5000001}
]);
//设置比例的颜色
比例。颜色（[“#aa2121”、“#c84040”、“#ed7171”、“#7ec17e”、“#518651”、“#215e2c”）；
//设置图表设置
图表填充（[10,10,10,20]）
//设置显示的级别数
.maxDepth（2）
.selectionMode（“无”）
.色标（色标）
。悬停（{fill:'#bdbdbd'}）；
//为标签启用HTML
chart.labels（）.useHtml（true）；
//配置标签
chart.labels（）格式（函数（）{
返回“+this.getData（'name'）+”
+
“+this.getData（'price'）+”
”+
“”+此.getData（'change'）+“”+
“（“+this.getData（'pchange'）+”%）
”+
“+anychart.format.number（Math.round（this.getData（'value'）/100000）/10，{groupsSeparator:'，'}）+”mn”；
});
//设置标题的设置
chart.headers（）格式（函数（）{
返回此.getData（'name'）；
});
chart.normal（）.headers（）.fontColor（#000000”）；
chart.normal（）.headers（）.fontSize（“6”）；
chart.normal（）.headers（）.fontWeight（'bold'）；
chart.hovered（）.headers（）.fontColor（#000099”）；
chart.labels（）.adjustFontSize（true）；
//设置工具提示的设置
chart.tooltip（）
.useHtml（true）
.titleFormat（函数（）{
返回“”+this.getData（'name'）+“-”+this.getData（'companyname'）+”；
})
.格式（函数（）{
返回“价格：”+
anychart.format.number（this.getData（'price'），{groupsSeparator:'，'}）+
“
更改：”+
anychart.format.number（this.getData（'change'），{groupsSeparator:'，'}）+
“
%Change:”+
anychart.format.number（this.getData（'pchange'），{groupsSeparator:'，'}）+
“%
卷：”+
anychart.format.number（this.value，{groupsSeparator:'，'}）+”
});
//设置图表的容器id
图表.集装箱（“集装箱”）；
//启动图表绘制
chart.draw（）；
});
});

您可以根据数据为图表添加颜色，如下所示。 或使用填充功能，以查看详细信息。 默认情况下，图表使用线性或顺序色标