검도 UI 불릿 차트 여러 대상 및 레이블

Question

다른 색과 레이블을 가진 여러 대상으로 불릿 차트를 만들려고합니다. 또한 척도 간격은 50이어야합니다.이 http://dojo.telerik.com/iXaSa/2을 시도했지만 단계 레이블이 작동하지 않고 대상 색을 바꾸고 레이블을 넣는 방법을 모르겠습니다.

이와 관련하여 도움을 주시면 감사하겠습니다.

Answer 1

대상 색상은 string 또는 function 일 수 있습니다. 함수로 정의한 경우 계열에 대한 정보가 포함 된 인수가 수신됩니다. 이 정보의 한 항목은 표시된 시리즈를 나타내는 index입니다.

target: { 
    color: function (arg) { 
     var colors = [ "red", "white", "blue" ]; 
     return colors[arg.index]; 
    }, 
    ... 
} 

여기에 스택 오버플로 조각으로 코드를 참조하십시오 :

당신은 대상에서 color를 정의 할 수 있습니다!

function createChart() { 
 

 

 
    $("#chart-temp").kendoChart({ 
 
    legend: { 
 
     visible: true 
 
    }, 
 

 

 
    series: [{ 
 
     type: "bullet", 
 
     data: [[0,40],[0,60],[0,50]], 
 

 
     target: { 
 
     color: function (arg) { 
 
      var colors = [ "red", "white", "blue" ]; 
 
      return colors[arg.index]; 
 
     }, 
 

 
     line: { 
 
      width: 5 
 

 
     } 
 
     } 
 
    }], 
 
    categoryAxis: { 
 
     labels:{ 
 
     step:50 
 
     }, 
 
     majorGridLines: { 
 
     visible: false 
 
     }, 
 
     majorTicks: { 
 
     visible: false 
 
     } 
 

 
    }, 
 

 
    valueAxis: [{ 
 
     plotBands: [{ 
 
     from: 0, to: 100, color: "green", opacity: .3 
 
     }], 
 
     majorGridLines: { 
 
     visible: false 
 
     }, 
 

 
     min: 0, 
 
     max: 100, 
 
     minorTicks: { 
 
     visible: false 
 
     } 
 
    }], 
 
    tooltip: { 
 
     visible: false, 
 
     template: "Maximum: #= value.target # <br /> Average: #= value.current #" 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    createChart(); 
 
});

.history { 
 
    border-collapse: collapse; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
.history .k-chart { 
 
    height: 65px;    
 
} 
 

 
.history td.item { 
 
    line-height: 65px; 
 
    width: 20px; 
 
    text-align: right; 
 
    padding-bottom: 22px; 
 
}

<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" /> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> 
 

 
<table class="history"> 
 
    <tr> 
 
    <td class="item">temp</td> 
 
    <td class="chart"><div id="chart-temp"></div></td> 
 
    </tr> 
 
</table>