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



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不清楚如何处理这些项目(或者它们可以解决问题,并且不起作用)。

最佳答案

我们在库中称这些“项目” valueBox。图表上的每个文本都继承自label,在这种情况下,valueBox也继承自label。这意味着您可以将一组相当标准的标签操作应用于图表上的所有文本。

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


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

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

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


注意:CSV图例在v2.6.0中已损坏。我们已在以下链接中发布了补丁。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>

关于javascript - ZingChart样式或删除CSV中的饼图标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44007302/

10-13 05:41