Question

我正在尝试调整我的图表，使其行为与此页面上的最后两个图表类似：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的新手，并且无法完全了解示例中的最新情况。

Answer 1

使用CSS完成：

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

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

突出显示最接近的系列 - 但仅显示突出显示的系列的X / Y？

1 个答案: