javascript - ZingChart 样式或删除来自 CSV 的饼图标签-6ren

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

转载作者：行者123 更新时间：2023-12-03 04:19:37

25

4

我有一个由外部 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 也继承自该文本。这意味着您可以将一组非常标准的标签操作应用于图表上的所有文本。

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

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

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

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

注意: CSV 图例在 v2.6.0 中已损坏。我们已在以下链接中发布了补丁。在此处输入代码

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

25

4

0

文章推荐： javascript - 比较 JavaScript 中的日期和时间

文章推荐： javascript - 输入文本字段验证检查

csv - 如何将 csv 文件读入数组并与另一个 csv 文件中的条目进行比较和替换？
我有两个 csv 文件 file1.csv 和 file2.csv。 file1.csv 包含 4 列。文件1: Header1,Header2,Header3,Header4 aaaaaaa,bb
csv - 如何测试 CSV 文件以及如何找出两个 CSV 文件之间的差异
我想知道是否有任何方法可以在导入数据库之前测试 CSV 文件？我有一个包含多列的巨大 CSV 文件，每列都有不同的数据类型和大小。如何测试生成的 CSV 文件中出现的数据是否与每列的大小一致？还有
csv - CSV 中的查找值和第二列的返回值
我正在从 SCOM 中提取服务器列表，并希望根据包含以下数据的 CSV 检查此列表: Computername,Collection Name Server01,NA - All DA Servers
csv - 如何使用 Super CSV 部分读取 CSV 文件
我有一个包含 24 列的 csv 文件。其中我只想阅读 3 列。我看到 super CSV 是一个非常强大的库，但我不知道如何部分读取 CSV。 partial reading上的链接坏了。请帮我举
csv - 如何将加特林日志文件导出到 csv
我正在尝试将加特林日志文件导出到 CSV，因为我需要更新 google 电子表格中的所有全局值，因为我的经理需要电子表格中的值。最佳答案此 CSV 文件被删除并替换为 JSON 文件，名为 glo
csv - csv 是结构化数据还是半结构化数据？
我对 csv 是结构化数据还是半结构化数据感到困惑。就像 RDBMS 是一个有关系的结构化数据，但 csv 没有关系。我无法找到确切的答案。最佳答案我可以说，具有恒定列和行(二维)的 CSV
csv - 使用 pipes-csv 从 csv 文件中读取第一行
我正在使用 pipes-csv 库读取一个 csv 文件。我想先读第一行，然后再读其余的。不幸的是，在 Pipes.Prelude.head 函数返回之后。管道正在以某种方式关闭。有没有办法先读取 c
csv - CSV 文件中空行的含义
起初这似乎很明显，但现在我不太确定。如果 CSV 文件具有以下行: a, 我会将其解释为具有值“a”和“”的两个字段。但是然后查看一个空行，我可以很容易地争辩说它表示一个值为“”的字段。我接受文件
csv - 将列表字典写入 csv
我正在尝试将列表字典写入 CSV 文件。我希望这些键是 CSV 文件的标题，以及与该键关联的列中的每个键关联的值。如果我的字典是: {'600': [321.4, 123.5, 564.1, 764
csv - 将数组导出为 CSV
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve thi
csv - CSV 文件可以有注释吗？
是否有任何官方方法允许 CSV 格式的文件允许评论，无论是在其自己的行上还是在行尾？我尝试检查wikipedia关于此以及RFC 4180但两者都没有提到任何让我相信它不是文件格式的一部分的内容，所
csv - 如何从字符串中读取 CSV？
我有一些 csv 格式的数据。然而它们已经是一个字符串，因为我是从 HTTP 请求中获取它们的。我想使用数据框来查看数据。但是我不知道如何解析它，因为 CSV 包只接受文件，而不接受字符串。一种解决
csv - CSV 文件中的值列表应该使用哪个分隔符？
我有一个 CSV 文件，其中包含一些字段的值列表。它们作为 HTML“ul”元素存储在数据库中，但我想将它们转换为对电子表格更友好的东西。我应该使用什么作为分隔符？我可以使用转义的逗号、竖线、分号或
csv - 如何使用管道分隔符导出到 .csv
我使用 Google 表格(电子表格)来合并我的 Gambio 商店的不同来源的文章数据。要导入数据，我需要在 .csv 文件中使用管道符号作为分隔符/分隔符，并使用 "作为文本分隔符。在用于导出为
csv - 报表生成器导出到带有列标题空间的 CSV
这是一个奇怪的请求，因为我们都知道数据库头不应该包含空格。但是，我正在使用的系统需要在其标题中使用空格才能导入。我创建了一个 Report Builder 报告，它将数据构建到一个表中，并在我运行
csv - 当其中一个值可能在字符串中包含逗号时处理 .CSV
我有一个 .csv 文件，我需要将其转换为 coldfusion 查询。我使用了 cflib.org CSVtoQuery 方法，它工作正常......但是...... 如果 csv 中的“单元格”在
csv - 文化独立 CSV
我想知道是否有任何方法可以生成文化中性 CSV 文件，或者至少指定文件中存在的特定列的数据格式。例如，我生成了包含带小数点分隔符 (.) 的数字的 CSV 文件，然后将其传递给小数点分隔符为 (,
Javascript:如果 CSV 中没有，则将值添加到 CSV - 如果已经在 CSV 中 - 从 CSV 中删除
我正在构建一个 CSV 字符串 - 因此用户单击 div 的所有内容 - 5 个字符的字符串都会传递到隐藏字段中 - 我想做的是附加每个新值并创建一个 CSV 字符串 - 完成后- 在文本框中显示 -
Linux CSV - 将 CSV 文件中的列添加到另一个 CSV 文件
我正在努力从另外两个文件创建一个 CSV 文件这是我需要的我想要的文件(很多其他行) “AB”；“A”；“B”；“C”；“D”；“E” 我拥有的文件: 文件 1:"A";"B";"C";"D";"
csv - 将包含带引号的值的表导出到配置单元中的本地 csv
我正在尝试将表导出到配置单元中的本地 csv 文件。 INSERT OVERWRITE LOCAL DIRECTORY '/home/sofia/temp.csv' ROW FORMAT DELIMI

首页

博学

6Ren·AI

商城

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