Question

I'm trying a line chart for several years with month names in the xaxis. xaxis seems to be an integer so I used the function from this answer: https://stackoverflow.com/a/30325918

The problem is that the chart is cut off by number 9 (which stands for "Okt") and I don't know why. So the 10 and 11 are missing. Also the tooltips are not shown, maybe that's a subsequent fault.

Style for the svg:

        #chart svg {
           height: 600px;
           width: 1456px;
                   }

Code for the Chart:

 nv.addGraph(function() {

            var chart = nv.models.lineChart()
                    .margin({left: 50})  //Adjust chart margins to give the x-axis some breathing room.
                    .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                    .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
                   ;

                    var Monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'] 

                    chart.xAxis     //Chart x-axis settings
                          .axisLabel('Monat')
                          .tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]).tickFormat(function(d){
                                            return Monate[d]
                                            });

                    chart.forceY([0, 55000]);

            d3.select('#chart svg').datum([{ values: [{ x:'0', y: '0'},{ x:'1', y: '0'},{ x:'2', y: '7147.75'},{ x:'3', y: '5567.75'},{ x:'4', y: '8307.75'},{ x:'5', y: '7680.75'},{ x:'6', y: '10416.75'},{ x:'7', y: '15119.25'},{ x:'8', y: '6654.75'},{ x:'9', y: '7670.75'},{ x:'10', y: '8535.75'},{ x:'11', y: '25978.5'}], key: '2012'},
                                            { values: [{ x:'0', y: '4397.5'},{ x:'1', y: '14542.5'},{ x:'2', y: '18652.5'},{ x:'3', y: '18027.5'},{ x:'4', y: '10123.5'},{ x:'5', y: '11686.25'},{ x:'6', y: '10451.5'},{ x:'7', y: '17918'},{ x:'8', y: '11013.25'},{ x:'9', y: '11598.25'},{ x:'10', y: '12179'},{ x:'11', y: '54450.75'}], key: '2013'}, 
                                            { values: [{ x:'0', y: '13257.75'},{ x:'1', y: '10050.25'},{ x:'2', y: '17530'},{ x:'3', y: '16684'},{ x:'4', y: '10437.25'},{ x:'5', y: '31956.5'},{ x:'6', y: '24343.75'},{ x:'7', y: '24026.5'},{ x:'8', y: '24754.5'},{ x:'9', y: '17423'},{ x:'10', y: '27284.75'},{ x:'11', y: '50121.25'}], key: '2014'}, 
                                            ...and so on...
                                            { values: [{ x:'0', y: '954'},{ x:'1', y: '0'},{ x:'2', y: '0'},{ x:'3', y: '0'},{ x:'4', y: '0'},{ x:'5', y: '0'},{ x:'6', y: '0'},{ x:'7', y: '0'},{ x:'8', y: '0'},{ x:'9', y: '0'},{ x:'10', y: '0'},{ x:'11', y: '0'}], key: '2019'}]).transition().duration(500).call(chart);


         //Update the chart when window resizes.
          nv.utils.windowResize(function() { chart.update() });
          return chart;
        });

Answer 1

您所有的x和y都是字符串。

删除所有的'字符。

我已经在div#chart上设置了尺寸样式，因为nvd3.css为svg设置了width和height的样式。

nvd3 line chart xaxis with month names not working

1 个答案: