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 に答える