EXTJS 7 areaChart 动态标记或标记自定义

Question

我正在使用 EXTJS 7.3.1 制作面积图我希望能够根据数据值自定义标记颜色。

我该怎么做。

目前，标记是为整个图表设置的。像这样。enter image description here

我想在值 < 75 时更改标记上的颜色

请告诉我

Answer 1

您需要为系列创建自定义渲染器函数，see here in the documentation。

像这样：

series: [{
   // your series definition, including marker etc.
   ,renderer: function(sprite, config, rendererData, index) {
      // renderer function must return the changes
      var changes = {};
      // get current record in the chart's store
      var record = rendererData.store.getData().items[index];
      
      // check value only when it is a marker
      if (config.type === 'marker') {
         // replace 'fieldName' with your fieldname
         // and color1 color2 with the desired colors
         changes.fillStyle = record.data.fieldName < 75 ? 
              'color1' : 'color2';
      }
      return changes;
   }
}],

EXTJS 7 areaChart 动态标记或标记自定义

EXTJS 7 areaChart Dynamic markers or marker customizations

charts

extjs

colors

markers