Highlight Closest Series - but only show X/Y of highlighted series?

问题

I'm trying to adapt my graph to behave like the last 2 graphs on this page: http://dygraphs.com/tests/series-highlight.html where on mouse-hover, it only displays the X/Y coordinates of the specific highlighted series, not ALL of the coordinates for that X value.

I can't seem to discern where in the javascript it specifies that, and it seems that all 4 of those graphs are set up the same, but behave differently.

My code currently looks like this, and works well for highlighting the closest series, but is just too cluttered with ALL the label points.

<script type="text/javascript">
g = new Dygraph(

// containing div
document.getElementById("graphdiv"),

// CSV or path to a CSV file.
<?php echo $chartDataString; ?>,
{
    title: 'Total Cycles',
    ylabel: 'Portfolio ($)',
    xlabel: 'Year',
    labelsDivStyles: { 'textAlign': 'right' },
    digitsAfterDecimal: 0,
    axes: {
        y: {
                labelsKMB: true,
        },
    },
    showLabelsOnHighlight: false,
    highlightCircleSize: 2,
    strokeWidth: 1,
    strokeBorderWidth: 1,
    highlightSeriesOpts: {
      strokeWidth: 3,
      strokeBorderWidth: 1,
      highlightCircleSize: 5,
    },
}

 );

Any ideas? I'm fairly new to javascript, and just can't quite get a handle on whats going on in the example.

回答1:

It's done using CSS:

<style type='text/css'>
  .many .dygraph-legend > span { display: none; }
  .many .dygraph-legend > span.highlight { display: inline; }
</style>

Only the highlighted series gets the "highlight" class in the legend.

来源：https://stackoverflow.com/questions/17836686/highlight-closest-series-but-only-show-x-y-of-highlighted-series

标签

dygraphs