동일한 단일 시리즈 챠트 차트에서 여러 마커로 작동하는 그림을 찾으려는 다른 라이브러리가 있습니다.단일 시리즈 꺾은 선형 차트에 다른 마커를 설정하는 방법은 무엇입니까?
1 시리즈라고하자가 V = [11, 12, 43, 21, 22]
나는 지점 (11) (12) (43)는 사각형으로, 동심원하고 (21, 22)로, 직사각형 할 원.
문서를 살펴 보았지만 아무 것도 찾을 수 없었습니다.
ZingChart, devexpress chart, telerik chart, flot chart, fusion chart 또는 wijmo chart angularJs libraries에서 가능한지 알려 주시기 바랍니다.
아주 쉽게 ZingChart에서이 작업을 수행 할 수 있습니다. 함수를 정의 할 수있는 jsRule이 있습니다. 함수 내에서 구문을 반환하여 가장 일반적인 이름 인 또는 노드의 스타일을 변경합니다.
jsRule의 하드 코딩 된 형식 인 rules에 구문을 명시 적으로 지정하는 것도 다른 방법입니다.
두 가지 데모를 모두 추가했습니다. marker 개체의 모든 특성을 다음 구문에 추가 할 수 있습니다.
/*
* callback argument format:
{
"id":"myChart",
"graphid":"myChart-graph-id0",
"graphindex":0,
"plotid":"",
"plotindex":0,
"nodeindex":7,
"key":7,
"scaleval":7,
"scaletext":"7",
"value":85,
"text":"%v",
"ev":null
}
*/
window.changeMarker = function(e) {
// this function is called once for every node
var returnObj = {
type: 'square'
}
if (e.nodeindex % 2 == 0) {
returnObj.type = 'star5';
returnObj.backgroundColor = 'black';
returnObj.size = 10;
}
// you can put any sort of logic to transform the marker nodes
//console.log(JSON.stringify(e))
return returnObj;
}
var myConfig = {
\t type: 'line',
\t series: [
\t \t {
\t \t \t values: [35,42,67,89,25,34,67,85],
\t \t \t marker: {
\t \t \t jsRule: 'changeMarker()'
\t \t \t }
\t \t },
\t \t { // you can also explicitly set them with rules
\t \t \t values: [135,142,167,189,125,134,167,185],
\t \t \t marker: {
\t \t \t rules: [
\t \t \t {
\t \t \t rule: '%i == 0',
\t \t \t type: 'square'
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 1',
\t \t \t type: 'triangle',
\t \t \t size:10
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 2',
\t \t \t type: 'star5'
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 3',
\t \t \t type: 'diamond',
\t \t \t backgroundColor: 'black'
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 4',
\t \t \t type: 'plus',
\t \t \t size:15
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 5',
\t \t \t type: 'star3',
\t \t \t size:12
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 6',
\t \t \t type: 'rpoly6',
\t \t \t size:9
\t \t \t },
\t \t \t {
\t \t \t rule: '%i == 7',
\t \t \t type: 'star4',
\t \t \t size: 6
\t \t \t }
\t \t \t ]
\t \t \t }
\t \t }
\t ]
};
zingchart.render({
\t id: 'myChart',
\t data: myConfig,
\t height: '100%',
\t width: '100%'
});html, body {
\t height:100%;
\t width:100%;
\t margin:0;
\t padding:0;
}
#myChart {
\t height:100%;
\t width:100%;
\t min-height:150px;
}
.zc-ref {
\t display:none;
}<!DOCTYPE html>
<html>
\t <head>
\t <!--Assets will be injected here on compile. Use the assets button above-->
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
\t </head>
\t <body>
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
\t </body>
</html>참고 :
https://www.zingchart.com/docs/tutorials/chart-elements/create-javascript-rules/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/marker/
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/rules/
답변 해 주셔서 감사합니다. 나는 똑같은 것을 찾고 있었다. – Dreamweaver