Question

我有一个NVD3图表，并希望将工具提示窗口中的日期值格式化为一个完整的日期，直至秒，同时仅在白天更改x轴上的标签。

这是我的图表：

    d3.json("mydata.json", function (error,data) {
        var chart;
        nv.addGraph(function() {
            var chart = nv.models.lineChart()
                    .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                    .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                    .transitionDuration(350)  //how fast do you want the lines to transition?
                    .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                    .showYAxis(true)        //Show the y-axis
                    .showXAxis(true)        //Show the x-axis
                ;
            chart.xAxis     //Chart x-axis settings
                .axisLabel('Date')
                .tickFormat(function(d){return d3.time.format('%d-%m-%y')(new Date(d));});
            chart.yAxis     //Chart y-axis settings
                .axisLabel('Temperature')
                .tickFormat(d3.format('.02f'));
            d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.
                .datum(data)         //Populate the <svg> element with chart data...
                .call(chart);          //Finally, render the chart!
            nv.utils.windowResize(function() { chart.update() });
            return chart;
        });
    });

以及一些示例数据：

[{"key":"Ambient Temperature","color":"#0000ff","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"Windchill Temperature","color":"#00ff00","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"Dewpoint Temperature","color":"#ff0000","values":[{"x":1407978270000,"y":10.86},{"x":1407978353000,"y":10.05},{"x":1407978353000,"y":10.05},{"x":1407978415000,"y":9.6},{"x":1407978523000,"y":9.97},{"x":1407978524000,"y":9.97},{"x":1407978546000,"y":10.83},{"x":1407978562000,"y":11.19},{"x":1407978571000,"y":11.15}]}]

有关如何实现这一目标的任何建议？谢谢！

Answer 1

http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html

你可以这样看：使用棱角分明，不是我的工作！：

$scope.toolTipContentFunction = function(){
    return function(key, x, y, e, graph) {
        return  'Super New Tooltip' +
            '<h1>' + key + '</h1>' +
            '<p>' +  y + ' at ' + x + '</p>'
    }
}



<div ng-controller="ExampleCtrl">
    <nvd3-multi-bar-chart
        data="exampleData"
        id="toolTipContentExample"
        width="550"
        height="350"
        xAxisTickFormat="xAxisTickFormatFunction()"
        showXAxis="true"
        showYAxis="true"
        interactive="true"
        tooltips="true"
        tooltipcontent="toolTipContentFunction()">
            <svg></svg>
    </nvd3-multi-bar-chart>
</div>

NVD3格式日期与X轴不同

1 个答案: