nvd3 menz-style test code

nvd3のテストです

by keisuke nakamura

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.5/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.5.16/nv.d3.js"></script>
<div id="chart1">
<!-- チャートを表示するための空の SVG -->
<svg></svg>
</div>

CSS

/* nvd3 version 1.8.4 (https://github.com/novus/nvd3) 2016-07-03 */
.nvd3 .nv-axis {
    pointer-events:none;
    opacity: 1;
}

.nvd3 .nv-axis path {
    fill: none;
    stroke: #000;
    stroke-opacity: .75;
    shape-rendering: crispEdges;
}

.nvd3 .nv-axis path.domain {
    stroke-opacity: .75;
}

.nvd3 .nv-axis.nv-x path.domain {
    stroke-opacity: 0;
}

.nvd3 .nv-axis line {
    fill: none;
    stroke: #e5e5e5;
    shape-rendering: crispEdges;
}

.nvd3 .nv-axis .zero line,
    /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
    stroke-opacity: .75;
}

.nvd3 .nv-axis .nv-axisMaxMin text {
    font-weight: bold;
}

.nvd3 .x  .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
    text-anchor: middle
}

.nvd3 .nv-axis.nv-disabled {
    opacity: 0;
}

.nvd3 .nv-bars rect {
    fill-opacity: .75;

    transition: fill-opacity 250ms linear;
    -moz-transition: fill-opacity 250ms linear;
    -webkit-transition: fill-opacity 250ms linear;
}

.nvd3 .nv-bars rect.hover {
    fill-opacity: 1;
}

.nvd3 .nv-bars .hover rect {
    fill: lightblue;
}

.nvd3 .nv-bars text {
    fill: rgba(0,0,0,0);
}

.nvd3 .nv-bars .hover text {
    fill: rgba(0,0,0,1);
}

.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
    stroke-opacity: 0;

    transition: fill-opacity 250ms linear;
    -moz-transition: fill-opacity 250ms linear;
    -webkit-transition: fill-opacity 250ms linear;
}

.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
    fill-opacity: 1;
}

.nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text {
    font-weight: bold;
    fill: rgba(0,0,0,1);
    stroke: rgba(0,0,0,0);
}

/* boxplot CSS */
.nvd3 .nv-boxplot circle {
  fill-opacity: 0.5;
}

.nvd3 .nv-boxplot...

JavaScript

var testdata = [
    {
        x:704646000000,
        y:10
    },
    {
        x:707324400000,
        y:30
    },
    {
        x:709916400000,
        y:50
    },
    {
        x:712594800000,
        y:60
    },
    {
        x:715273200000,
        y:80
    },
    {
        x:717865200000,
        y:90
    },
    {
        x:720543600000,
        y:130
    },
    {
        x:723135600000,
        y:160
    },
    {
        x:725814000000,
        y:300
    },
    {
        x:728492400000,
        y:390
    },
    {
        x:730911600000,
        y:420
    },
    {
        x:733590000000,
        y:450
    },
    {
        x:736182000000,
        y:490
    }
];

var chartData = [
        {
          values: testdata,
          key: 'result',
          color: '#d03c3c'
        }
        // 複数のグラフを表示したければ、上と同じ感じでどんどん追記
      ];

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)   //If 'false', every single x-axis tick label will be rendered.
      .rotateLabels(-45)      //Angle to rotate x-axis labels.
      .showLegend(false)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)    //Distance between each group of bars.
    ;

    // x軸のタイトル設定＋フォーマット指定（数値指定）
    // chart.xAxis
    //     .tickFormat(d3.format(',f'));

    chart.xAxis.tickFormat(function(d) {
        return d3.time.format('%Y/%m')(new Date(d))
    });


     // y軸のタイトル設定＋フォーマット指定（数値指定）
    chart.yAxis
        .tickFormat(d3.format(',0f'));

    d3.select('#chart1 svg')
        .datum(chartData)
        .call(chart);
    nv.utils.windowResize(chart.update);
    d3.selectAll('.nvtooltip').remove();
    return chart;
});