Question

我尝试用d3和nv.d3 js建立一个mutiCart.All没问题，但我遇到了一个布局问题，我花了很多时间研究但是徒劳。

正如你在这里看到的那样，x轴值没有正确定位，它应该位于每个柱的中心下方。我想知道是否可以修复此问题。并且有相关的发布在这里： NVD3.js multiChart x-axis labels is aligned to multiple lines, but not multiple bars

enter image description here

以下是我调用API的代码

<script>
var margin = {top: 50, right: 50, bottom: 30, left: 40};
var data={
    //mianData,axisKeys,svg
   mianData:[
   {"key":"Failed",
      "type":"line",
      "color": 'yellow',
      "yAxis":1,
      "values":[{"x":0,"y":4},{"x":1,"y":7},{"x":2,"y":1},{"x":3,"y":4}]
   },
   {"key":"Client Impacting",
    "type":"line",
    "color": 'red',
    "yAxis":1,
    "values":[{"x":0,"y":0},{"x":1,"y":3},{"x":2,"y":0},{"x":3,"y":1}]
   },
   {
       "key" : "emergency",
       "type":"bar",
       "color": 'yellow',
       "yAxis":2,
       "values": [{"x":0,"y":8},{"x":1,"y":14},{"x":2,"y":17},{"x":3,"y":12}]
    },
    {
       "key" : "normal",
       "type":"bar",
       "color": 'blue',
       "yAxis":2,
       "values": [{"x":0,"y":452},{"x":1,"y":708},{"x":2,"y":699},    {"x":3,"y":612}]
    },
    {
       "key" : "routine",
       "type":"bar",
        "color": 'lightblue',
       "yAxis":2,
       "values": [{"x":0,"y":538},{"x":1,"y":412},{"x":2,"y":349},{"x":3,"y":338}]
     },
     {
       "key" : "total",
       "type":"bar",
       "color": 'green',
       "yAxis":2,
       "values": [{"x":0,"y":998},{"x":1,"y":1134},{"x":2,"y":1065},{"x":3,"y":962}] 
    }
   ],
   axisKeys:["Sep-14","Sep-21","Sep-28","Oct-5"],
   svg:"#chart svg"
}enter code here


draw(data);

function draw(o){
  nv.addGraph(function() {
         var chart = nv.models.multiChart()
        .options({reduceXTicks:false })


        .margin(margin)
        .color(d3.scale.category10().range());

        //chart.x(function(d,i){ return i;});



        chart.xAxis.tickFormat(function(d){
            // If there is such element, return it
            if(typeof o.axisKeys[d] !== "undefined"){
                return o.axisKeys[d];
            }
            return "";

        }) .showMaxMin(false);
    // Get normalised data for chart
    var seriesData =o.mianData;
    // Get max values for each axis
    var minY1 = 0;
    var minY2 = 0;
    var maxY1 = 0;
    var maxY2 = 0;
    for(var i = 0; i < seriesData.length; i++) {
        var _axis = seriesData[i].yAxis;
        var _values = seriesData[i].values;

        // Walk values and set largest to variables
        for(var j = 0; j < _values.length; j++) {
            // For maxY1
            if(_axis == 1) {
                if(_values[j].y > maxY1) {
                    maxY1 = _values[j].y;
                }
            }
            // For maxY2
            if(_axis == 2) {
                if(_values[j].y > maxY2) {
                    maxY2 = _values[j].y;
                }
            }
        }
    }
    // Set min, max values of axis
    chart.yDomain1([minY1, maxY1]);   //0,7
    chart.yDomain2([minY2, maxY2]);  //0,1134
    // Set chart
    d3.select(o.svg)
        .datum(seriesData)
        .call(chart);

    // Auto resize chart on window resize
    nv.utils.windowResize(chart.update);
    return chart;
  });
 }
</script>

nvd3.js multiChart布局头痛

0 个答案: