带有月份名称的 nvd3 折线图 xaxis 不起作用

Question

几年来我一直在尝试在 x 轴上使用月份名称的折线图。 xaxis 似乎是一个整数，所以我使用了这个答案中的函数：

问题是图表被数字 9（代表 "Okt"）截断了，我不知道为什么。所以 10 和 11 不见了。也没有显示工具提示，可能是后续错误。

svg 的样式：

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

图表代码：

 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 设置为 100%。

带有月份名称的 nvd3 折线图 xaxis 不起作用

nvd3 line chart xaxis with month names not working

d3.js

nvd3.js