0

I draw a multiBarChart using nvd3.js.

xAxis shows a date and i need to change the color of saturday's and sunday's bars, tooltips and xAxis labels.

I can add additional parameter to my json, such as:

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

But, for example, in tooltipContent callback function I can't access to json element, because it has such arguments - key, x, y, e, graph.

In tickFormat callback function I also can't access to json element, because first argument is x value and the second is index.

this is HighCharts example - https://www.dropbox.com/s/yf1rx5axl5h5wb2/2013-09-29_2216.png

Thank you and sorry for my English.

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

以下是其他两个问题的其他几个选项：

要更改条的颜色，您可以执行以下操作：

    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 中没有这样做的选项。你基本上有两个选择。

  • 您可以获取生成的 SVG 并对其进行修改。因此，您将选择生成的条形图，然后再选择相关的条形图并相应地更改它们。不过，这很笨拙；首先，您需要等到所有内容都生成后再执行此操作。
  • 您可以修改 NVD3 源以执行您想要的操作。

我会推荐第二种选择。你更灵活，可以做你想做的事。

于 2013-09-29T18:51:47.013 回答