7

我正在尝试 Zing Chart 并以这种方式拥有 JS 数组：

"values": [
[1458846060000, 167.272, "Parameter1", "Parameter2", "Parameter3"],
[1458847060000, 150.272, "Parameter1", "Parameter2", "Parameter3"]
]

当悬停在特定点上时 - 我可以在工具提示中显示时间、值和系列，但是当用户悬停在散点图中的特定点上时，如何从同一个数组中显示 Parameter1、2、3？

谢谢。

4

1 回答 1

7

您可以使用自定义标记，这些标记在“绘图”或“系列”对象中定义为使用“数据”前缀的属性或数组。例如，“data-fullname”或“data-extracredit”。

这是一个示例，其中为参数 1、2 和 3 创建了三个自定义标记。要在工具提示中调用它们，您将使用标记 %data-parameter1、%data-parameter2 和 %data-parameter3。请参阅演示。

var myConfig = {
  "type":"scatter",
  "title":{
    "text":"Custom Token as Attribute"
  },
  "plot":{
    "tooltip":{
      "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3."
    }
  },
  "scale-x":{
    "transform":{
      "type":"date",
      "all":"%g:%i %A"
    }
  },
  "scale-y":{
 
  },
  "series":[
    {
      "values": [
        [1458846060000, 167.272],
        [1458847060000, 150.272],
        [1458848060000, 134.311]
      ],
      "data-parameter1":"Parameter1",
      "data-parameter2":"Paremeter2",
      "data-parameter3":"Parameter3"
    }
  ]  
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

http://demos.zingchart.com/view/78P4SI51

或者，您可以使用数组为每个单独的节点分配文本。请参阅演示。

var myConfig = {
  "type":"scatter",
  "title":{
    "text":"Custom Token as Array"
  },
  "plot":{
    "tooltip":{
      "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3."
    }
  },
  "scale-x":{
    "transform":{
      "type":"date",
      "all":"%g:%i %A"
    }
  },
  "scale-y":{
 
  },
  "series":[
    {
      "values": [
        [1458846060000, 167.272],
        [1458847060000, 150.272],
        [1458848060000, 134.311]
      ],
      "data-parameter1":["Parameter1a","Parameter1b","Parameter1c"],
      "data-parameter2":["Paremeter2a","Parameter2b","Parameter2c"],
      "data-parameter3":["Parameter3a","Parameter3b","Parameter3c"]
    }
  ]  
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

http://demos.zingchart.com/view/GSGWW4YO

让我知道这是否有帮助！我是 ZingChart 团队的一员，很乐意回答更多问题。谢谢！

于 2016-04-20T20:49:07.197 回答