2014-01-31 193 views
0

我是Google Graphs中的新成員,我試圖在 以下的照片(預計)中生成此圖,但我得到的圖有點不同。我有三個不同的字母,每個字母包含自己的值(A1,A2,A3,B1,B2 ...例如)。Google線圖,刪除多餘的線

有我正努力代碼:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('string', 'Type'); 
    data.addColumn('number', 'Value'); 

    data.addRows([ 
    [new Date(2014, 0, 30), 'A', 75], 
    [new Date(2014, 0, 30), 'A', 100], 
    [new Date(2014, 0, 30), 'A', 125], 

    [new Date(2014, 0, 31), 'A', 75], 
    [new Date(2014, 0, 31), 'A', 100], 
    [new Date(2014, 0, 31), 'A', 125], 

    [new Date(2014, 0, 30), 'B', 150], 
    [new Date(2014, 0, 30), 'B', 175], 
    [new Date(2014, 0, 30), 'B', 200], 

    [new Date(2014, 0, 31), 'B', 150], 
    [new Date(2014, 0, 31), 'B', 175], 
    [new Date(2014, 0, 31), 'B', 200], 
]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, { 
     type: 'number', 
     label: 'A', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null; 
     } 
    }, { 
     type: 'number', 
     label: 'B', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null; 
     } 
    }, { 
     type: 'number', 
     label: 'C', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null; 
     } 
    }, 2]); 

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(view, { 
     height: 400, 
     width: 600, 
     hAxis: { 
      format: 'dd.MM.yyyy', 
      minValue: new Date(2014, 0, 29, 12), 
      maxValue: new Date(2014, 0, 31, 10) 
     }, 
     series: { 
      0: { 
       // series A options 
       pointSize: 5, 
       lineWidth: 0 

      }, 

      3: { 
       // this series draws the line 
       pointSize: 0, 
       lineWidth: 1, 
       visibleInLegend: false, 
       enableInteractivity: false, 
       color:'blue' 
      } 
     } 
    }); 
} 
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart}); 

而且它顯示了我這一點,我不知道如何在2014年1月31日刪除訂單 - > A3與30.01.2014-> B1和顏色藍線爲藍色線,紅線線爲紅色線可以嗎? :

enter image description here

但預計一個低於:

enter image description here

+1

請分享你已經嘗試了代碼,爲什麼它不工作。 – jmac

+0

jmac我添加了我正在嘗試的代碼,如果你能幫助我會更好。謝謝 –

+0

難以產生嗎? –

回答

1

這就是我的回答對你previous question不是拿這個最好的辦法的情況下,但有一個簡單的解決方案來修改您的現有代碼以完成此項工作。從傳遞給view.setColumns數組的末尾刪除2

view.setColumns([0, { 
    type: 'number', 
    label: 'A', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null; 
    } 
}, { 
    type: 'number', 
    label: 'B', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null; 
    } 
}, { 
    type: 'number', 
    label: 'C', 
    calc: function (dt, row) { 
     return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null; 
    } 
}]); 

並調整一系列選項:

series: { 
    0: { 
     // series A options 
     pointSize: 5, 
     lineWidth: 1 
    }, 
    1: { 
     // series B options 
     pointSize: 5, 
     lineWidth: 1 
    }, 
    2: { 
     // series C options 
     pointSize: 5, 
     lineWidth: 1 
    } 
} 
+0

asgallant非常感謝你的工作!現在我需要將它實現到我的項目中,我需要生成json並通過「DataTable」提供這些數據什麼是PHP數組中的數據結構?正如我問我以前的問題,我給了一個示例php數組。例如 –

+0

我的意思是[cols]和[rows]格式 –

+0

您是問一般的結構是什麼,或者如何專門複製DataTable? – asgallant