如何在Angular14+dc.js4.2.7中实现按属性定义颜色的多折线图

技术栈 #

• Angular 14
• dc.js 4.2.7

需求 #

需要绘制包含多数据集的折线图，每条折线对应一个MAC地址，且折线颜色必须由各数据集自带的color属性定义，本质是按MAC地址和颜色两个属性分组。

数据集格式 #

{
  id: "string",
  datasets: [
    {
      id: "string",
      data: [];
      color: "string";
    }
  ]
}

现有实现代码 #

目前已合并所有数据集，实现了按MAC地址分组的系列图，代码如下：

// generate charts
var chart_width = null,
  chart_height = null;
var chartObjet = dc.seriesChart("#chart");

chartObjet.height(chart_height).width(chart_width)
  .margins({ top: 10, right: 10, bottom: 20, left: 40 })
  .chart(function(c) {
    return dc.lineChart(c)
            .renderDataPoints({ radius: 2, fillOpacity: 0.8, strokeOpacity: 0.1 });
  })
  .clipPadding(10)
  
  .dimension(chartDimension)
  .group(chartDimension.group())
  .seriesAccessor(function(d) {
    return d.key[1];
  })
  .keyAccessor(function(d) {
    return d.key[0];
  })
  .valueAccessor(function(d) {
    return +d.value;
  })
  .x(xScale)
  .xUnits(xUnits);
chartObjet.render();

疑问 #

尝试dc.js的颜色配置后，仍无法实现按数据集color属性设置折线颜色，请问该需求是否可行？

该需求完全可行，核心是让dc.seriesChart关联到每个系列对应的color属性，具体实现步骤如下：

1. 构建MAC地址与颜色的映射表 #

先遍历原始数据集，将每个MAC地址（即数据集的id）和对应的color存储到映射对象中，方便后续颜色匹配：

// 假设yourOriginalData是你的原始数据集对象
const macColorMap = new Map();
yourOriginalData.datasets.forEach(ds => {
  macColorMap.set(ds.id, ds.color); // ds.id为MAC地址，ds.color为对应颜色
});

2. 为系列图表配置自定义颜色函数 #

利用dc.js的.colors()方法，传入一个根据系列名称（MAC地址）返回对应颜色的函数：

chartObjet.colors(series => macColorMap.get(series) || '#ccc'); // #ccc为默认颜色

3. 确保子折线图继承颜色配置 #

由于seriesChart由多个lineChart子图表组成，需要在子图表初始化时绑定对应颜色：

.chart(function(c) {
  const lineChart = dc.lineChart(c)
            .renderDataPoints({ radius: 2, fillOpacity: 0.8, strokeOpacity: 0.1 });
  // 通过子图表的_groupName（即系列名称）获取对应颜色
  lineChart.colors(() => macColorMap.get(lineChart._groupName) || '#ccc');
  return lineChart;
})

完整调整后的代码示例 #

// 构建MAC地址到颜色的映射
const macColorMap = new Map();
yourOriginalData.datasets.forEach(ds => {
  macColorMap.set(ds.id, ds.color);
});

// generate charts
var chart_width = null,
  chart_height = null;
var chartObjet = dc.seriesChart("#chart");

chartObjet.height(chart_height).width(chart_width)
  .margins({ top: 10, right: 10, bottom: 20, left: 40 })
  .chart(function(c) {
    const lineChart = dc.lineChart(c)
            .renderDataPoints({ radius: 2, fillOpacity: 0.8, strokeOpacity: 0.1 });
    // 为子折线图绑定对应颜色
    lineChart.colors(() => macColorMap.get(lineChart._groupName) || '#ccc');
    return lineChart;
  })
  .clipPadding(10)
  
  .dimension(chartDimension)
  .group(chartDimension.group())
  .seriesAccessor(function(d) {
    return d.key[1]; // d.key[1]对应MAC地址
  })
  .keyAccessor(function(d) {
    return d.key[0];
  })
  .valueAccessor(function(d) {
    return +d.value;
  })
  .colors(series => macColorMap.get(series) || '#ccc')
  .x(xScale)
  .xUnits(xUnits);

chartObjet.render();

关键说明 #

• dc.seriesChart的.colors()方法支持传入函数，参数为当前系列的名称（即seriesAccessor返回的值），通过映射表直接匹配颜色。
• 子折线图的_groupName属性对应当前系列的MAC地址，以此为键获取预定义的颜色值。
• 确保分组维度中，每个数据点都能正确关联到对应的MAC地址，保证seriesAccessor返回的系列名称准确。

内容的提问来源于stack exchange，提问作者user3267841