私は、同一の系列線図上で複数のマーカーでどちらが機能するかを調べるために異なるライブラリを用意しています。単一の線グラフに異なるマーカーを設定するにはどうすればよいですか？
1シリーズであるが、私は点11が矩形になりたい= [11、12、43、21、22]
V 12正方形に同心円、43であることが21と22であると言うことができますサークル。
私はドキュメントを通過しようとしましたが、何も見つかりませんでした。
ZingChart、devexpress chart、telerik chart、flot chart、fusion chart、またはwijmo chart angularJsライブラリで可能かどうか教えてください。
これをZingChartで簡単に行うことができます。関数を定義するためのjsRuleがあります。関数内での構文を返し、最も一般的な名前としてまたはノードのスタイルを変更します。
もう1つの方法は、rulesの中で、jsRuleというハードコード形式の構文を明示的にコーディングすることです。
以下のデモで両方を追加しました。 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