Các màu sắc trên biểu đồ trong biểu đồ ExtJs/YUI có thay đổi động không?

Question

Tôi đang sử dụng biểu đồ ExtJs/YUI trong ứng dụng của mình. Điều tôi đang tự hỏi, liệu có thể tự động thay đổi màu sắc trên bất kỳ biểu đồ nào dựa trên dữ liệu không?

tức là tôi có một cửa hàng chứa một trường chứa màu hex cho hàng cụ thể đó. Có thể tự động đặt màu của thanh trong biểu đồ thanh có giá trị hex không?

Answer 1

Hãy thử điều này:

1. Tạo một lĩnh vực ẩn và gán giá trị của nó với giá trị của lĩnh vực lưu trữ, trong đó có các giá trị màu.
2. khi hiển thị biểu đồ thanh, đặt màu nền của thanh thành giá trị của trường bị ẩn.

Answer 2

Hãy xem điều này blog post. Khi bạn định cấu hình đối tượng biểu đồ, hãy chuyển đối tượng chuỗi có thuộc tính kiểu như được mô tả trong bài đăng đó để xác định màu và chuỗi của chúng.

Sau đó, bạn chỉ cần lấy màu của mình bằng cách lặp qua các bản ghi lưu trữ và tạo một mảng mới hoặc có thể kéo nó từ cửa hàng của bạn bằng store.query. Sau đó chuyển mảng này làm thuộc tính.

(...), 
series: [style: { colors: arrayBuiltFromStore }], 
(...) 

Answer 3

Từ những gì tôi đã có thể tìm thấy, bạn có thể sử dụng

(...), 
series: [style: {colors: arrayBuiltFromStore }], 
(...) 

phương pháp nếu bạn đang tạo một biểu đồ pie (hoặc biểu đồ khác với series.colors thuộc tính), và nó hoạt động tốt.

Nếu bạn đang sử dụng loại biểu đồ không hỗ trợ chuỗi màu. Màu sắc sẽ phức tạp hơn một chút. Tôi thấy rằng việc sử dụng phương thức renderer hoạt động khá tốt. Vấn đề duy nhất với phương pháp này (mà tôi có thể thấy ngay) là nó không thay đổi màu sắc trong truyền thuyết. Nó sẽ mất một số chỉnh sửa thêm để xem nếu điều này có thể được kéo từ cửa hàng.

Nếu bạn tìm ra vấn đề về huyền thoại, hãy cho tôi biết, nhưng tôi hy vọng điều này sẽ hữu ích.

Lưu ý: Không phải tất cả các biến được sử dụng trong tập lệnh dưới đây đều được điền trong tập lệnh.

function myColorer(rec) { 
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000'); 
    return aFiller[rec]; 
} 
Ext.onReady(function() { 
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore); 
    chart = new Ext.chart.Chart({ 
     renderTo: document.getElementById('test-graph'), 
     width: 800, 
     height: 600, 
     animate: true, 
     store: sDataStore, 
     legend: { 
      position: 'right', 
      isVertical: true, 
     }, 
     axes: [{ 
      type: 'Numeric', 
      grid: true, 
      position: 'left', 
      fields: ['field1','field2','field3','field4'], 
      title: 'Title Here', 
      grid: { 
       odd: { 
        opacity: 1, 
        fill: '#ddd', 
        stroke: '#bbb', 
        'stroke-width': 1 
       } 
      }, 
      minimum: 0, 
      adjustMinimumByMajorUnit: 0 
     }, { 
      type: 'Category', 
      position: 'bottom', 
      fields: label1, 
      title: sXAxisLabel, 
      grid: true, 
     }], 
     series: [{ 
      renderer: function(sprite, record, curAttr, index, store) { 
       var color = myColorer(index); 
       return Ext.apply(curAttr, { 
        fill: color 
       }); 
      }, 
      type: 'area', 
      highlight: false, 
      axis: 'left', 
      xField: label1, 
      yField: ['field1','field2','field3','field4'], 
      style: { 
       opacity: 0.93 
      } 
     }] 
    }); 
}); 

Answer 4

Có, bạn có thể làm điều đó bằng cách sử dụng trình kết xuất đồ họa. Ví dụ về mã sau thay đổi màu sắc của các thanh trong biểu đồ thanh:

  series: { 
       type: 'bar', 
       xField: 'name', 
       yField: 'value', 
       label:{ 
        field: 'value' 
       }, 
       renderer: function(sprite, config, rendererData, index) { 

        var record = rendererData.store.getData().items[index]; 

        return Ext.apply(rendererData, { 
         fillStyle: record.data.color, 
        }); 
       } 
      } 

Đây 'màu' là một trường của mô hình cửa hàng. Bạn có thể đặt màu khác nhau cho mỗi thanh bằng cách đặt nó trong bản ghi tương ứng trong cửa hàng của bạn.