Question

我的图表看起来像这样：

数据来自网络服务，我希望所有数据在我的模型中保持不变。图表上的条形表示时间跨度（只是显示时间跨度的数字列.TotalHours）。

有时，如图所示，时间跨度将为负 - 意味着它超前于计划。在这种情况下，我根本不想显示该段，实际上想从绿色段中减去该时间。从我看到的东西，可以帮助我实际减去负数的东西可以是后期处理。但是，在完成后我怎样才能修改我的图表创建？

如果它是相关的，图表创建的代码如下：

 <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>

编辑：我在我的代码中添加了一个检查，生成表以说明负值而不是绘制紫色段。然而，仍有从前一部分减去时间的问题，我不明白如何完成。

修改：添加了带注释的更新代码。还添加了这个产生的更新图像。既然正在处理实际图表，我仍然需要一种方法来减去前一个（绿色）段的值。完成此编辑后，现在是图表的样子：

Answer 1

如果您想在客户端上尝试使用javascript来解决问题......

删除最后一次编辑并允许负值通过

然后使用以下代码段进行更正，仅在上方添加 - ＆gt; 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);
  }
}

如何使用动态创建的Google图表发布流程？

1 个答案: