Question

我有一个由外部CSV文件提供的ZingChart饼图。如何在饼图上隐藏标签？在下面的模拟代码中，读取完整的文本显示在底部。

＆＃13;

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,
});

＆＃13;

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

＆＃13;

并未明确说明如何处理这些项目（或者他们这样做......并且它不起作用）。

Answer 1

我们在库中调用那些“项目”valueBox。图表上的每一段文字都继承自标签，在这种情况下，valueBox也会继承。这意味着您可以对图表上的所有文字部分应用一组非常标准的标签操作。

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

相反，您可以通过valueBox数组添加多个标签。它可以是单个对象，也可以是对象数组。这将允许您显示多个标签。

注意： _是JSON结构中的注释

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

注意：在v2.6.0中打破了CSV图例。我们在以下链接中添加了补丁。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({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

ZingChart样式或删除来自CSV的饼图标签

1 个答案: