2016-05-16 39 views
1

我使用multichart與線和scatterplot。折線圖工作正常,但散點圖數據不能正確繪製x軸數據。angularjs nvd3 multichart與線和散點圖不工作

有人可以提供一個工作的例子,而不是github上的嗎?下面是選擇:

$scope.options = { 
       chart: { 
        type: 'multiChart', 
        height: 450, 
        margin: { 
         top: 30, 
         right: 60, 
         bottom: 50, 
         left: 70 
        }, 
        color: d3.scale.category10().range(), 
        //useInteractiveGuideline: true, 
        duration: 500, 
        xAxis: { 
         ticks: 10, 
         tickFormat: function (d) { 
          return d3.format(',10d')(d); 
         } 
        }, 
        yAxis1: { 
         ticks: 10, 
         tickFormat: function (d) { 
          return d3.format('10d')(d); 
         } 
        } 
       } 
      }; 

function generateData() { 

       var data1 = [{ x: 0, y: 25 }, { x: 25, y: 25 }, { x: 25, y: 0 }]; 
       var data2 = [{ x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }]; 
       var data3 = [{ x: 0, y: 75 }, { x: 75, y: 75 }, { x: 75, y: 0 }]; 
       var data4 = [{ x: 0, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 0 }]; 
       var scatter = [{ x: 10, y: 30, size: Math.random(), shape: 'circle' }, { x: 20, y: 50, size: Math.random(), shape: 'circle' }, { x: 30, y: 80, size: Math.random(), shape: 'circle' }]; 

       var testdata = []; 
       testdata.push({ key: 'Stream1', values: data1 }); 
       testdata.push({ key: 'Stream2', values: data2 }); 
       testdata.push({ key: 'Stream3', values: data3 }); 
       testdata.push({ key: 'Stream4', values: data4 }); 
       testdata.push({ key: 'Stream5', values: scatter }); 

       testdata[0].type = 'line'; 
       testdata[0].yAxis = 1; 
       testdata[1].type = 'line'; 
       testdata[1].yAxis = 1; 
       testdata[2].type = 'line'; 
       testdata[2].yAxis = 1; 
       testdata[3].type = 'line'; 
       testdata[3].yAxis = 1; 
       testdata[4].type = 'scatter'; 
       testdata[4].yAxis = 1; 


       return testdata; 
      } 
+0

我發現x軸總是不正確,如果任一圖表的x值不匹配另一個x值,這真的很煩人。一個真正難以解決的問題是匹配兩個數據中的x值,因此每個x值都存在於兩個系列中。 –

回答

0

我也遇到這樣的問題,我的解決方法是添加一個虛擬散射系列只有起點和終點,以及系列的顏色是透明的。

例如: 線系列:1,2,3,4,5 ... 100 散射1:5,67,83 虛設散射:1,100

接着的x域散點將隨着系列線性縮放