combinColumns合并列后，通过values设置别名导致color失效

[qqianding]

var frame = new Frame(data.timelineData);
frame = Frame.combinColumns(frame, ['fb', 'rq', 'tcp', 'dns', 'pgrd', 'dmrd', 'psdm'], 'value', 'type', ['date']);
var chart = new G2.Chart({
id: 'J_Chart',
forceFit: true,
height: 400
});
chart.source(frame, {
date: {
alias: '时间',
tickCount: 20
},
value: {
alias: '加载时长'
},
type: {
type: 'cat',
values: ['白屏时长','请求页面时长','TCP连接时长','DNS查找时长','页面加载完成时长','Dom树加载完成时长','Dom树解析时长']
}
});
chart.legend({
title: null,
position: 'bottom',
dy: 10
});
chart.line().position('date*value').color('type', function(value) {
console.log(value);
if(value === '白屏时长') {
return 'red'
}else {
return 'blue';
}
});
chart.render();

color方法里打印出来的全是白屏时长，是哪里设置不对么？

[dxq613]

type列定义的 values改成 formatter 函数，values 的目的有两个：

• 一个是调整分类值的顺序，这时候values的值要跟数据值一致
• 如果你这个字段中的数值是 0，1，2,...,n时，values会按照字段索引做个映射，转换成对应的文本

你的情况其实是要将每个文本改变成中文，所以应该使用formatter函数

var map = {fb: '白屏时长', rq: '请求页面时长',...}
type: {
   formatter: function(val){
     return map[val];
   }
}