Kendo UI Chart Colors

У меня возникли проблемы с настройкой цвета штрихов для диаграммы столбцов Kendo UI. Вот код:Kendo UI Chart Colors

<!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 Fiddle

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

Привет Arun, Есть ли у вас какие-либо идеи следующий вопрос HTTP: // stackoverflow.com/questions/30176594/multi-color-line – casillas

Kendo UI Chart Colors

ответ

Смежные вопросы