嘿，我看你在尝试给DevExpress的饼图根据数据值动态修改颜色，当前的代码方式不太对——DevExpress的图表不是直接通过DOM样式或者简单修改Color属性来控制颜色的，得用官方提供的配置方式来做。

给你两种靠谱的解决方案，根据你的需求选：

方案一：用customizePoint回调（推荐，灵活适配多数据点） #

这个方法是DevExpress官方推荐的自定义数据点外观的方式，每次图表渲染或者数据源更新时，都会自动调用这个回调函数，根据每个数据点的数值返回对应的颜色。

完整代码示例：

<div id="canvas-holder" >
  <div id="pie" ></div>
</div>

<script>
var pie = $("#pie").dxPieChart({
  size: {width: 500},
  dataSource: [{country: "On",area: 0}],
  series: [{
    argumentField: "country", 
    valueField: "area"
  }],
  title: "Area of Countries",
  // 核心：通过这个回调动态设置每个点的颜色
  customizePoint: function(point) {
    // 判断数值：小于0用红色，否则绿色
    return {
      color: point.value < 0 ? "red" : "green"
    };
  }
}).dxPieChart("instance");

// 模拟从WebService获取数据并更新（替换成你实际的接口请求）
setInterval(function () {
  // 这里模拟随机生成数据，你换成从接口拿到的真实数据即可
  var newData = [{country: "On", area: Math.random() > 0.5 ? 15 : -7}];
  // 更新数据源，回调会自动重新计算颜色
  pie.option("dataSource", newData);
}, 1000);
</script>

方案二：直接更新系列的color属性（适合单数据点场景） #

如果你的饼图始终只有一个数据点，也可以在更新数据源后，直接修改系列的颜色配置：

var pie = $("#pie").dxPieChart({
  size: {width: 500},
  dataSource: [{country: "On",area: 0}],
  series: [{argumentField: "country", valueField: "area"}],
  title: "Area of Countries"
}).dxPieChart("instance");

setInterval(function () {
  // 模拟获取新数据
  var newData = [{country: "On", area: Math.random() > 0.5 ? 10 : -5}];
  // 更新数据源
  pie.option("dataSource", newData);
  // 获取当前系列配置
  var seriesConfig = pie.option("series[0]");
  // 根据数值设置颜色
  seriesConfig.color = newData[0].area < 0 ? "red" : "green";
  // 更新系列配置
  pie.option("series[0]", seriesConfig);
}, 1000);

为什么你之前的代码没生效？ #

• 你用了pie.option("Color", "red")，但DevExpress的配置属性是小写的color，而且这个属性属于series，不是全局配置；
• 直接修改DOM的css({ Color: 'red' })没用，因为饼图是用SVG渲染的，样式由DevExpress内部管理；
• pie.series[0].Color = "red"这种直接修改实例属性的方式不被官方支持，必须通过option方法来更新配置。

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