2

我正在尝试调整我的图表以使其表现得像此页面上的最后 2 个图表：http ://dygraphs.com/tests/series-highlight.html在鼠标悬停时，它只显示 X/Y 坐标特定突出显示的系列，而不是该 X 值的所有坐标。

我似乎无法辨别它在 javascript 中指定的位置，而且似乎所有 4 个图表都设置相同，但行为不同。

我的代码目前看起来像这样，并且可以很好地突出显示最近的系列，但是所有标签点都太混乱了。

<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,
    },
}

 );

有任何想法吗？我对 javascript 还很陌生，只是无法完全理解示例中发生的事情。

4

1 回答 1

3

它是使用 CSS 完成的：

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

只有突出显示的系列获得图例中的“突出显示”类。

于 2013-07-24T15:37:20.970 回答