如何使用動態創建的Google圖表發佈流程？

數據來自於web服務，我想所有的數據保持不變，因爲它涉及到通過我的模型。圖表上的條形圖表示時間跨度（僅顯示時間跨度的數字列.TotalHours）。

偶爾，如圖所示，時間跨度將爲負值 - 意味着它比計劃提前。當出現這種情況時，我根本不想顯示該段，實際上也想從綠色段中減去那段時間。從我擡頭看的東西，可以幫助我實際減去負數的東西可以後處理。但是，如何在完成後修改圖表創建？

在情況下，它relavent，圖表的創建代碼如下：

<script type="text/javascript"> 
     google.charts.load('current', { 'packages': ['corechart'] }); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 
      var data = new google.visualization.DataTable(); 

      // Since every row will alwyas have this as the first column, we do not need to iterate. The first column will always be this title. 
      data.addColumn("string", "Category"); 

      // This iterates through each stage (timespan) and creates a column for it. 
      // And display only the relavent time spans on the chart. 
      @foreach (var stage in Model.selectedForm.rows[0].stages) 
      { 
       @Html.Raw("data.addColumn('number', '" + Regex.Replace(stage.label, "(\\B[A-Z])", " $1") + "');") // Adding a numeric column for each timespan (stage) in that row. Using Regex to make the labels more friendly to the user. 
      } 


      @foreach (var row in Model.selectedForm.rows) 
      { 
       @Html.Raw("data.addRow(['" + row.label + "'") //The first part of our row is the label - each subsequent stage will be filled in at each iteration below 

       foreach (var stage in row.stages) //For each stage in the row being created ... 
       { 

        if (stage.timespan.TotalHours <= 0) 
        { 
         @Html.Raw(", " + "null") // replace the column with a null value 
        } 
        else 
        { 
         @Html.Raw(", " + stage.timespan.TotalHours) //...Continue the HTML builder adding additional timespans to eventually... 
        } 
       } 

       @Html.Raw("]);\n\n") //...close it here 
      } 

      var options = { 
       titlePosition: 'none', 
       width: 1200, 
       height: 400, 
       legend: { position: 'top', maxLines: 3 }, 
       bar: { groupWidth: '75%' }, 
       isStacked: true 
      } 

      var chart = new google.visualization.BarChart(document.getElementById('SOPChart')); 
      chart.draw(data, options); 
     } 

    </script>

編輯：我已在我的代碼檢查產生的表佔負值，而不是繪製紫色部分。然而，仍然存在從前面的段減去那個時間的問題，我不清楚如何完成。

編輯：添加了帶有註釋的更新代碼。還添加了這個產生的更新圖像。既然實際的圖表正在處理中，我仍然需要一種方法來減去先前（綠色）段的值。此編輯後，這裏是圖表看起來像現在：如果你想嘗試在客戶端的JavaScript來解決此問題

來源

2016-11-22 Mkalafut

推薦加入「如果條件」內'的foreach（在row.stages VAR階段）' - 輸出替換值，而不是' stage.timespan.TotalHours' – WhiteHat

我不確定你的意思。如果最後創建的列中的值爲負值（這是唯一可以爲負值的列），那麼我根本不想繪製最後一列，而是從前一列中減去該值。希望能夠清楚一點。 – Mkalafut

哪裏是更新的代碼？ – WhiteHat

...

除去最後的編輯，並允許負值來通

然後用下面的代碼段來校正，添加正上方 - >var options = {

for (var i = 0; i < data.getNumberOfColumns(); i++) { 
    if (data.getValue(i, data.getNumberOfColumns() - 1) < 0) { 
    // subtract from next to last column 
    data.setValue(i, data.getNumberOfColumns() - 2, data.getValue(i, data.getNumberOfColumns() - 2) + data.getValue(i, data.getNumberOfColumns() - 1)); 
    // remove negative from last column 
    data.setValue(i, data.getNumberOfColumns() - 1, null); 
    } 
}

來源

2016-11-28 14:58:24 WhiteHat

希望這有助於... – WhiteHat

如何使用動態創建的Google圖表發佈流程？

回答

相關問題