Kendo UI圖表顏色

我在配置Kendo UI柱形圖的酒吧顏色時遇到了問題。下面的代碼：Kendo UI圖表顏色

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="chart"></div> 
    <script src="js/thirdParty/jquery.js"></script> 
    <script src="js/thirdParty/kendo.all.min.js"></script> 
    <script> 
     $(function() { 
      var data, 
       dataSource; 
      data = [{ 
       type: "C1", 
       amount: 100, 
       year: 2008, 
       color: "red" 
      }, { 
       type: "C2", 
       amount: 120, 
       year: 2008, 
       color: "blue" 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2009, 
       color: "blue" 
      }, { 
       type: "C1", 
       amount: 10, 
       year: 2010, 
       color: "red" 
      }, { 
       type: "C1", 
       amount: 120, 
       year: 2011, 
       color: "red" 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2011, 
       color: "blue" 
      }]; 
      dataSource = new kendo.data.DataSource({ 
       data: data, 
       group: { 
        field: "type" 
       }, 
       sort: { field: "year" } 
      }); 
      $("#chart").kendoChart({ 
       dataSource: dataSource, 
       series: [{ 
        type: "column", 
        field: "amount", 
        categoryField: "year", 
        name: "#= group.value #", 
        colorField: "color" 
       }], 
      }) 
     }); 
    </script> 
</body> 
</html>

我試圖讓「C1」是紅色和「C2」是藍色但圖表呈現像在下面的屏幕截圖：

enter image description here

任何指針在正確的方向將不勝感激。

來源

2013-08-27 Carl Rippon

尋找到這進一步之後，我發現colorField是該系列中設置顏色爲一個點（不是整個系列）。我發現seriesColors就是我一直在尋找：

http://docs.kendoui.com/api/dataviz/chart#configuration-seriesColors

這裏是我的重構的例子：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="chart"></div> 
    <script src="js/thirdParty/jquery.js"></script> 
    <script src="js/thirdParty/kendo.all.min.js"></script> 
    <script> 
     $(function() { 
      var data, 
       dataSource; 
      data = [{ 
       type: "C1", 
       amount: 100, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 120, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2009 
      }, { 
       type: "C1", 
       amount: 10, 
       year: 2010 
      }, { 
       type: "C1", 
       amount: 120, 
       year: 2011 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2011 
      }]; 
      dataSource = new kendo.data.DataSource({ 
       data: data, 
       group: { 
        field: "type" 
       }, 
       sort: { field: "year" } 
      }); 
      $("#chart").kendoChart({ 
       dataSource: dataSource, 
       seriesColors: ["red", "blue"], 
       series: [{ 
        type: "column", 
        field: "amount", 
        categoryField: "year", 
        name: "#= group.value #" 
       }], 
      }) 
     }); 
    </script> 
</body> 
</html>

來源

2013-09-03 04:48:44

檢查JS小提琴

http://jsfiddle.net/9VZdS/45/

$(function() { 
    var dataset = new Array(1,2,3,null,5,6); 
    var highlighted = new Array(null,null,null,4,null,null); 

    $('#chart').kendoChart({ 
     theme: 'metro', 
     seriesDefaults: { 
      type: 'column', 
      stack: true 
     }, 
     series: [ 
      { 
       name: 'Not Highlighted', 
       data: dataset, 
       color: 'red' 
      }, 
      { 
       name: 'Highlighted', 
       data: highlighted, 
       color: 'blue' 
      } 
     ] 
    }) 
});

來源

2013-08-27 05:12:22

您好阿倫，你有以下問題 HTTP的任何想法：// stackoverflow.com/questions/30176594/multi-color-line – casillas

Kendo UI圖表顏色

回答

相關問題