javascript - Zingchart - 如何向工具提示添加更多信息？

coder 2025-04-01 原文

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

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

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

谢谢。

最佳答案

您可以使用自定义标记，这些标记在“绘图”或“系列”对象中定义为使用“数据”前缀的属性或数组。例如，“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 团队的一员，很乐意回答更多问题。谢谢!

关于javascript - Zingchart - 如何向工具提示添加更多信息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36753138/

javascript Zingchart 34 data-parameter Parameter charts

有关javascript - Zingchart - 如何向工具提示添加更多信息？的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

javascript - Zingchart - 如何向工具提示添加更多信息？

有关javascript - Zingchart - 如何向工具提示添加更多信息？的更多相关文章

随机推荐