0

nvd3.js を使用して multiBarChart を描画します。

xAxis は日付を示しており、土曜日と日曜日のバー、ツールチップ、および xAxis ラベルの色を変更する必要があります。

次のようなパラメーターを json に追加できます。

{ x: someX, y: someY, series: 0, isHoliday: true }

しかし、たとえば、tooltipContent コールバック関数では、json 要素にアクセスできません。これは、キー、x、y、e、グラフなどの引数があるためです。

tickFormat コールバック関数では、最初の引数が x 値で、2 番目の引数がインデックスであるため、json 要素にもアクセスできません。

これは HighCharts の例です - https://www.dropbox.com/s/yf1rx5axl5h5wb2/2013-09-29_2216.png

ありがとう、そして私の英語でごめんなさい。

4

2 に答える 2

2

追加の属性には、e.point プロパティからアクセスできます。

たとえば、ツールチップ パーツの場合、次のようなコードを使用できます。

var chart = nv.models.multiBarChart()
            .options({
                showXAxis: true,
                showYAxis: true,
                transitionDuration: 250

            }).tooltip(function (key, x, y, e, graph) {
                if (e.point.isHoliday) {
                  //your custom code here
                }
            }

他の 2 つの質問に対するその他のオプションを次に示します。

バーの色を変更するには、次のようにします。

    d3.selectAll("rect.nv-bar")
            .style("fill-opacity", function (d, i) { //d is the data bound to the svg element
               //Used opacity here but anything can be changed
                return d.isHoliday ? .8 : .6; 
            })

ラベル部分については、ラベルをより詳細に制御する必要があったため、tickFormat コールバックの代わりに以下のコードを選択しました。

d3.select('.nv-x.nv-axis > g').selectAll('g').selectAll('text')
            .attr('transform', function (d, i, j) {
                return d.isHoliday ? 'translate (0, 15)' : ''; //Lowers the label text for the holiday instances
            })
            .attr('class', function (d, i, j) {
                return d.isHoliday ? 'holiday-graph-legend' : 'default-graph-legend'; 
            })
于 2014-02-09T13:56:56.783 に答える
0

NVD3 でこれを行うオプションはありません。基本的に 2 つのオプションがあります。

  • 生成された SVG を取得して変更できます。したがって、生成されたバーを選択してから、関連するバーをサブ選択し、それに応じて変更します。ただし、これは非常に不器用です。まず、すべてのコンテンツが生成されるまで待つ必要があります。
  • NVD3 ソースを変更して、必要なことを行うことができます。

2番目のオプションをお勧めします。あなたははるかに柔軟で、やりたいことを正確に行うことができます。

于 2013-09-29T18:51:47.013 に答える