100 labels in separate div with highlighted series in a box

问题

I am trying to show labels div in a separate div with the highlighted series marked with a box , I am doing so because I have 100 labels and showing them above the graph will cover the graph. I want to do the same thing happening here , but with the labels in a separate div since 100 labels and each label name is long which will be too much for this area and cover the graph it self. I also found this one, but it put the labels in a separate div and no box around the highlighted point. This is my current code:

  <html>
  <head>
  <script type="text/javascript" src="dygraph-combined-dev.js"></script>

    <style type='text/css'>
      .few .dygraph-legend > span.highlight { border: 1px solid grey; }
      .many .dygraph-legend > span { display: none; }
      .many .dygraph-legend > span.highlight { display: inline; }
      </style>
 </head>
  <body>
  <div id="labels"><p>Welcome</p></div>
  <script type="text/javascript">
  var div = document.createElement('div');
    div.className = "few";
    div.style.display = 'block';
    document.body.appendChild(div);
    var defaultLabelHTML = undefined;
  g2 = new Dygraph(
    div,
    "SUBSCRIBE.txt", 
    {   width: 1000,
        height: 300,labelsDiv: document.getElementById("labels"),
    drawCallback: function(dygraph, is_initial){if (is_initial)  {defaultLabelHTML= document.getElementById("labels").innerHTML;}}, 
    stackedGraph: true, highlightCircleSize: 2, 
    highlightSeriesOpts: {
            strokeWidth: 2,
            strokeBorderWidth: 1,
            highlightCircleSize: 4,
                } 
  });
  </script>
  </body>
  </html>

I am new to javascript and Dygraph, but find working with it really amazing as it makes everything really easy and visual.

回答1:

Thank you I have a found an answer: https://groups.google.com/forum/#!topic/dygraphs-users/_G7b5gUblOE just replacing

.few .dygraph-legend > span.highlight { border: 1px solid grey; }

with

#labelsdiv > span.highlight { border: 1px solid grey; }

Dygraph is such an amazing and brilliant piece of software.

来源：https://stackoverflow.com/questions/31987981/100-labels-in-separate-div-with-highlighted-series-in-a-box

标签

javascript

legend

dygraphs