MVC应用程序中的动态条形图

Question

我正在尝试在Visual Studio中的MVC应用程序中创建动态条形图

<input type="button" value="Add Column" onclick="add('Work',20)" class="btn btn-default btn-sm" />

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


<script>

    var myObj = { "Elicit": 16, "Design": 23, "Code": 17, "Test": 24, "Deploy": 20 };
    var myJSON = JSON.stringify(myObj);
    var obj2 = JSON.parse(myJSON);
    var v1 = obj2.Elicit;
    var v2 = obj2.Design;
    var v3 = obj2.Code;
    var v4 = obj2.Test;
    var v5 = obj2.Deploy;


google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawTrendlines);

function drawTrendlines() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Items');
      data.addColumn('number', 'Sales');

      data.addRows([
        ['Elicitation', v1],
        ['Design', v2],
        ['Code', v3],
        ['Test', v4],
        ['Deploy', v5],
      ]);

      var options = {
        title: 'Project Division',
        trendlines: {
          0: {type: 'linear', lineWidth: 5, opacity: .3},
          1: { type: 'exponential', lineWidth: 10, opacity: .3 },
          2: {type: 'curve', lineWidth: 10, opacity: .3}
        },
        hAxis: {
          title: 'Time of Day'
        },
        vAxis: {
          title: 'Rating (scale of 1-10)'
        },
        colors: ['#80ccff', '#85e085', '#ffb84d', '#b3b3ff', '#ffb3ff'],
        backgroundColor: '#f1f2f7',
      };

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

    function add(name,val)
{
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Items');
        data.addColumn('number', 'Sales');

        data.addRows([
          ['Elicitation', v1],
          ['Design', v2],
          ['Code', v3],
          ['Test', v4],
          ['Deploy', v5],
          [name, val]
        ]);

        var options = {
            title: 'Project Division',
            trendlines: {
                0: { type: 'linear', lineWidth: 5, opacity: .3 },
                1: { type: 'exponential', lineWidth: 10, opacity: .3 },
                2: { type: 'curve', lineWidth: 10, opacity: .3 }
            },
            hAxis: {
                title: 'Time of Day'
            },
            vAxis: {
                title: 'Rating (scale of 1-10)'
            },
            colors: ['#80ccff', '#85e085', '#ffb84d', '#b3b3ff', '#ffb3ff'],
            backgroundColor: '#f1f2f7',
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);

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

</script>

我可以添加和删除条形图中显示的数据。我尝试了多种方法，但似乎都没有。

最后，我能够做的是使用变量名和值添加一个额外的列。但是，为预设构造函数设置1个附加列，2列等等是不切实际的。此外，这不允许我删除列。我该怎么做才能解决这个问题？