ZingChart CSVから来る円グラフのラベルをスタイリングまたは削除する

外部のCSVファイルによってZingChart円グラフが供給されています。というラベルを円グラフに隠すにはどうすればよいですか？下のシミュレーションコードでは、が完全にのテキストが下部に表示されています。ZingChart CSVから来る円グラフのラベルをスタイリングまたは削除する

var chartData = { 
 
    type: "pie", 
 
    csv: { 
 
    title: true, 
 
    dataString: "Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14", 
 
    rowSeparator: "_", 
 
    separator: "|", 
 
    mirrored: true, 
 
    horizontalLabels: true, 
 
    verticalLabels: true, 
 
    } 
 
} 
 

 
zingchart.render({ 
 
    id: "chartDiv", 
 
    data: chartData, 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zingchart/2.6.0/zingchart.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id='chartDiv'></div> 
 
</body> 
 

 
</html>

docsはそれを明確にどのようにそれらの項目に対処するために作成しない（あるいは彼らはありません...それは動作しません）。

出典

2017-05-16 Leeroy

私たちのライブラリには、それらのアイテムをvalueBoxという名前で呼ばれています。グラフの各テキストは、ラベルから継承しています。この場合、valueBoxもそれを継承しています。つまり、ラベルのかなり標準的なセットをのテキストのすべての部分に適用することができます。

"plot": { 
     "valueBox": { 
     "visible": false 
     } 
    }

逆に、あなたはvalueBox配列を介して複数のラベルを追加することができます。単一のオブジェクトでも、オブジェクトの配列でも構いません。これにより、複数のラベルを表示することができます。

注： CSV伝説がv2.6.0に壊れている：_ JSON構造にコメント

 "_valueBox": [ 
     { 
      type: 'all', 
      placement: 'out', 
      text: '%t' 
     }, 
     { 
      type: 'all', 
      placement: 'in', 
      text: '%v (%npv)' 
     }  
     ]

注意です。パッチを次のリンクに貼り付けました。 enter code here

<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>

参照されるすべてのドキュメントはここで見つけることができます：

https://www.zingchart.com/docs/tutorials/chart-elements/value-boxes/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/value-box/

https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/

var myConfig = { "graphset":[ { "type":"pie", "csv":{ "title":true, "separator":"|", "mirrored":true, "data-string":"Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14", "row-separator":"_", "horizontal-labels":true, "vertical-labels":true }, "scale":{ "visible":false }, "plot": { "valueBox": { "visible": false }, "_valueBox": [ { type: 'all', placement: 'out', text: '%t' }, { type: 'all', placement: 'in', text: '%v (%npv)' } ] } } ], "tween":null }; 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 \t <script src= "https://cdn.zingchart.com/hotfix/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>

出典

2017-05-16 20:28:56 nardecky

私は、個々のデータポイントの値は 'valueBox'esを、したいが、私は「完全に読み」と言う全体のパイを、説明スケールのラベルを望んでいません。デモではこれが行われません。コードには何も表示されていないように見えます（値はまったくなく、円グラフのラベルがまだ残っています）。 – Leeroy

問題のテキストは、myChart-graph-id0-scale-item_0というIDを持っています。そのため、私はそれをアイテムと呼んでいます。 – Leeroy

あなたは今何を言っているのか分かります。私はそのテキストを見ることができなかったので、私はstackoverflowのチャートビューを台無しにしているbitiumのプラグイン。列と行の区切り記号と関係しています。正直なところあなたはjavascriptでcsvファイルを解析し、データ文字列を渡していますか？フォーマットをjavascriptのオブジェクト表記形式にするほうがはるかに簡単です。これは可能でしょうか？または、あなたのCSVの文字列フォーマットを要求してZingChartに接続するだけですか？ – nardecky

ZingChart CSVから来る円グラフのラベルをスタイリングまたは削除する

答えて

関連する問題