javascript-悬停文字不显示

尽管我已经指定了text和hoverinfo,但是根本没有得到任何悬停注释.

如果我注释掉“文本”属性,则会得到hoverinfo的默认行为:“ x y”.我还尝试了hoverinfo:“文本”和hoverinfo:“ x文本”(这是我真正想要的),但是这些都不会改变行为.

https://jsfiddle.net/abalter/0cjprqgy/

var data =
{
    "x":["2014-02-10 00:00:00.0","2014-02-18 00:00:00.0","2014-02-24 00:00:00.0"],
  "y":[0,0,0],
  "text":["gemcitabine","gemcitabine + Abraxane","Xeloda"],
  "hoverinfo": "all",
  "name":"Treatment",
  "type":"scatter",
  "mode":"markers",
  "marker":
  {
    "size":9,
    "color":"#800000"
    },
  "uid":"c2e171"
};

var layout = 
{
    "title":"Treatments",
  "height":600,
  "width":655,
  "autosize":true,
  "yaxis":
  {
    "titlefont":
    {
        "size":12,
      "color":"#800000"
    },
    "domain":[0.85,0.9],
    "showgrid":false,
    "showline":false,
    "showticklabels":false,
    "zeroline":true,
    "type":"linear",
    "range":[0,0],
    "autorange":true
  },
  "hovermode":"closest",
  "xaxis":
  {
    "type":"date",
    "range":[1389215256994.8186,1434909143005.1814],
    "autorange":true
  }
};

Plotly.plot('graph', [data], layout);

解决方法:

首先,感谢您让我发现这个非常酷的图形平台!我查看了文档,以了解如何格式化数据(此处为https://plot.ly/javascript/hover-events/#coupled-hover-events-on-single-plot)…并与您玩弄.

首先,我删除了所有不必要的双引号,包装了参数名称,并将值数组置于“数据”数组之外.我不知道这是否是问题的一部分…我只是尝试将其格式化为我发现的示例.

当我使用“ domain”参数玩耍时,“ x y text”突然出现.
我不知道它的真正定义.
我再说一遍,我有10分钟的经验. (大声笑)

检查我对您的小提琴所做的此更新:https://jsfiddle.net/0cjprqgy/6/

var dates = ["2014-02-10 00:00:00.0","2014-02-18 00:00:00.0","2014-02-24 00:00:00.0"],
  qty = ["0.2","0.5","1"],
  product = ["gemcitabine","gemcitabine + Abraxane","Xeloda"],
data =
{
  x:dates,
  y:qty,
  text:product,
  hoverinfo: "x+y+text",
  name:"Treatment",
  type:"scatter",
  mode:"markers",
  marker:
  {
    size:9,
    color:"#800000"
    },
  uid:"c2e171"
};

var layout = 
{
  title:"Treatments",
  height:600,
  width:655,
  autosize:true,
  yaxis:
  {
    titlefont:
    {
      size:12,
      color:"#800000"
    },
    domain:[0.85,1.9],
    showgrid:false,
    showline:false,
    showticklabels:false,
    zeroline:true,
    type:"linear",
    range:[0,0],
    autorange:true
  },
  hovermode:"closest",
  xaxis:
  {
    type:"date",
    range:[1389215256994.8186,1434909143005.1814],
    autorange:true
  }
};

Plotly.plot('graph', [data], layout);
上一篇:JavaScript-将函数应用于具有相同类名的div集合中的特定div


下一篇:前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉