Question

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

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

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

感谢。

Answer 1

您可以使用自定义标记，它们在“plot”或“series”对象中定义为使用“data”前缀的属性或数组。例如，“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团队，很高兴回答更多问题。谢谢！

Zing图表 - 如何向工具提示添加更多信息？

1 个答案: