Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何更改dimple.js中工具提示的位置和大小_Javascript_Dimple.js - Fatal编程技术网

Javascript 如何更改dimple.js中工具提示的位置和大小

Javascript 如何更改dimple.js中工具提示的位置和大小,javascript,dimple.js,Javascript,Dimple.js,是否有任何方法可以更改条形图顶部的工具提示位置及其在dimple.js图表中的大小 如果有什么办法,请告诉我。我已经使用“GetToolTiptText”更改了工具提示的文本。现在我必须更改工具提示的位置和大小 这是我的小提琴: 您必须覆盖标准工具提示行为,这意味着您将定义整个工具提示样式和内容 您可以对系列s执行以下操作: s.addEventHandler("mouseover", function (e){ // Draw the text inf

是否有任何方法可以更改条形图顶部的工具提示位置及其在dimple.js图表中的大小

如果有什么办法,请告诉我。我已经使用“GetToolTiptText”更改了工具提示的文本。现在我必须更改工具提示的位置和大小

这是我的小提琴:


您必须覆盖标准工具提示行为,这意味着您将定义整个工具提示样式和内容

您可以对系列s执行以下操作:

     s.addEventHandler("mouseover", function (e){
                // Draw the text information
                svg1.selectAll(".dimple-hover-text")
                  .data([e.xValue, d3.format(",.f")(e.yValue)])
                    .enter()
                    .append("text")
                    .attr("class", "dimple-hover-text")
    // Set the x and y positions of your tooltip 
                    .attr("x", 200) 
                    .attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; })
   //desired font style                    
                    .style("font-family", "courier new") 
                    .style("text-anchor", "end")
   //desired font-size
                    .style("font-size", "30px")   
  //desired font-color    
                    .style("fill", "#ffccb6")          
                    .style("pointer-events", "none")
                    .text(function (d) { return d; });//the text to be displayed, taken from .data()

              });

              // Clear the text on exit
              s.addEventHandler("mouseleave", function (e) {
                svg1.selectAll(".dimple-hover-text").remove();
              });
通过这种方式,您可以根据需要为工具提示添加尽可能多的样式,并且通过一点css,您几乎可以使外观成为默认工具提示。 这是你的电话号码


我没有费心使工具提示中的数据与您原来的小提琴中的数据完全相同,但我注意了使您能够更改工具提示的字体和位置。

现在我想在工具栏顶部获得工具提示。。如何得到那。。
     s.addEventHandler("mouseover", function (e){
                // Draw the text information
                svg1.selectAll(".dimple-hover-text")
                  .data([e.xValue, d3.format(",.f")(e.yValue)])
                    .enter()
                    .append("text")
                    .attr("class", "dimple-hover-text")
    // Set the x and y positions of your tooltip 
                    .attr("x", 200) 
                    .attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; })
   //desired font style                    
                    .style("font-family", "courier new") 
                    .style("text-anchor", "end")
   //desired font-size
                    .style("font-size", "30px")   
  //desired font-color    
                    .style("fill", "#ffccb6")          
                    .style("pointer-events", "none")
                    .text(function (d) { return d; });//the text to be displayed, taken from .data()

              });

              // Clear the text on exit
              s.addEventHandler("mouseleave", function (e) {
                svg1.selectAll(".dimple-hover-text").remove();
              });