无法并排绑定dxchart（devextreme JS图表）

Question

我无法在项目中绑定并排图表。 虽然我已经成功使用了BarCharts，气泡图和guage图表，但我发现很难找出为什么我无法绑定SIde-By-Side图表。这是我的MVC视图

<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />

<div class="media-list is-grid p-10 list-items" data-plugin="animateList" data-animate="fade" data-child="li">
    <ul class="blocks blocks-100 blocks-xxl-2 blocks-xl-2 blocks-lg-2 blocks-md-2 blocks-sm-2" data-plugin="animateList" data-child=">li">
        <li>
            <div class="panel">
                <div class="panel-body p-10 custom-Pb">
                <div id="barChartz1" style="width:100%"></div>
                </div>
            </div>
        </li>
        <li>
            <div class="panel">
               <div class="panel-body p-10 custom-Pb">
                    <div id="barChartz2" style="width:100%"></div>
                </div>
            </div>
        </li>
    </ul>
</div>


<script type="text/javascript" src="~/Scripts/bundle.js" charset="utf-8"></script>
<script>
        var MOAPIURL = '';
        var StoryCardContext = '';
        var Chart1Obj1 = [];
        var Chart1Obj2 = [];
        var Panel1Id='';
        var Panel2Id='';
        var Story1Id='';
        var Story2Id='';
        var Chart1Name = '';
        var Chart2Name = '';
        var Chart1YAxis = '';
        var Chart2YAxis = '';
        var Chart3YAxis = '';
        var Chart4YAxis = '';
        var Chart5YAxis = '';
        var RadioLakhMioValue = '';
        var ChartColor1 = "";
        var ChartColor2 = "";
        var ChartColor3 = "";
        $(document).ready(
function ()
{
    MOAPIURL = '@System.Configuration.ConfigurationManager.AppSettings["MOAPIURL"]';
    $('#DashBoardName').text('@ViewBag.DashBoardName');
    StoryCardContext = '';
    Chart1Obj1 = [];
    Chart1Obj2 = [];
    if(@ViewBag.Menu=='20')
    {
        Panel1Id='1';
        Panel2Id='2';
        Story1Id='17';
        Story2Id='18';
    }
    DisplayStoryCards(@ViewBag.Menu);

});

    function JsonObjectSlice(result, TopCount) {

        var StoryCardContext = JSON.parse(JSON.stringify(result));
        var top10 = StoryCardContext.sort(function (a, b) { return a.MetricValue1 < b.MetricValue1 ? 1 : -1; })
        .slice(0, TopCount);
        return top10;
    }
 function DisplayStoryCards(MenuId) {
          $.ajax({
            url: MOAPIURL + 'Home/GetStoryCardInfo/' + MenuId + "",
            async: false,
            type: 'get',
            dataType: 'json',
            success: function (data) {

                StoryCardContext = data;
                BuildStoryCardByID(data);
            },
            error: function (data) {
                alert('err');
            }
        });
        function BuildStoryCardByID(data) {

            var ids = Enumerable.From(data).Select("$.StoryCardID").Distinct().ToArray();
            for (j = 0; j < ids.length; j++) {

                var queryResult = Enumerable.From(data).Where(function (x) { return (x.StoryCardID == ids[j] && x.IsDefault == 'Y'); }).ToArray();
                GetInputParameters(queryResult, j + 1);
            }
        }
    }
    function GetInputParameters(data, Sequence) {
        var DefaultTopCount = 10;
        var url = MOAPIURL;
        var reqobj = {};
        var ApiMethod = '';
        var StoryCardName = '';
        var title = '';
        var YAxis = "";
        var SeriesColor = "#AF7AC5";//"#F7DC6F";//#82E0AA";//"#EC7063";// "#E74C3C";
        if (Sequence == "1") {

            SeriesColor = "#EC7063";// "#E67E22";
            ChartColor1 = "#EC7063";
        }
        if (Sequence == "2") {

            SeriesColor = "#008ae6";//"#2ECC71  e95949";
            ChartColor2 = "#008ae6";
        }
        if (Sequence == "3") {

            SeriesColor = "#b35900";
            ChartColor3 = "#b35900";
        }
        if (Sequence == "4") {
            SeriesColor = "#00cccc";
        }
        for (var i = 0; i < data.length; i++) {
            ApiMethod = data[i].APIMethod;
            StoryCardName = data[i].Description;
            title = data[i].Title + data[i].FilterValue;
            reqobj[data[i].ParamTxt] = data[i].ParamVal;
            YAxis = data[i].Name;
        }
        url = url + ApiMethod;
        StoryCardName = "#" + StoryCardName + Sequence;
        var toolDiv = "#toolDiv" + Sequence;
        reqobj["Searchfilters"] = getFinalSearchCriteria();//GetSearchFilter(); //need to call search filter
        BindChartWithData(StoryCardName, title, url, reqobj, DefaultTopCount, YAxis, SeriesColor);
    }
function BindChartWithData(divid, title, myurl, StoryCardContext, TopCount, YAxis, SeriesColor) {
        $.ajax({
            url: myurl,
            type: 'POST',
            async: false,
            //contentType: 'application/json; charset=utf-8',
            data: StoryCardContext,
            success: function (result) {
               if (divid == "#barChartz1") {
                    Chart1Name = title;
                    Chart1Obj1 = result;
                    Chart1YAxis = YAxis;
                }
                if (divid == "#barChartz2") {
                    Chart2Name = title;
                    Chart1Obj2 = result;
                    Chart2YAxis = YAxis;
                }
                var res = result;
                if (divid == "#barChartz1" || divid == "#barChartz2") {

                    if(divid == "#barChartz1")
                    {
                        TopCount=$('#txtTopCount1').val();
                    }
                    if(divid == "#barChartz2")
                    {
                        TopCount=$('#txtTopCount2').val();
                    }
                    res = JsonObjectSlice(res, TopCount);

                }

                EntryPoint.SideBySideBar(divid, title, res, YAxis, SeriesColor, 'state', 'year2004','year2001');
            },
            error: function (response) {
                if (response.status == '500') {
                    CommonAlert()
                }
            }
        });
    }
 </script>

成功的ajax调用的结果就是这个对象

var dataSource = [{
    state: "Illinois",
    year2001: 476.851,
    year2004: 528.904
}, {
    state: "Indiana",
    year2001: 195.769,
    year2004: 227.271
}, {
    state: "Michigan",
    year2001: 335.793,
    year2004: 372.576
}, {
    state: "Ohio",
    year2001: 374.771,
    year2004: 418.258
}, {
    state: "Wisconsin",
    year2001: 182.373,
    year2004: 211.727
}];

我可以肯定地确保ajax调用成功并且执行甚至移动到EntryPoint.SideBySideBar（divid，title，res，YAxis，SeriesColor，'state'，'year2004'，'year2001'）;并且没有任何例外地执行，但图表没有绑定。

这是我的JS，我将数据与图表绑定。

var $ = require('jquery');
require('devextreme/viz/bar_gauge');
require('devextreme/viz/chart');
require('jszip');

 SideBySideBar: function CreateSideBySideChart(id, Title, dataset, YAxis, SeriesColor, XParam, YParam1, YParam2) {
        $(id).dxChart({
            dataSource: dataset,
            commonSeriesSettings: {
                argumentField: 'state',
                type: "bar",
                hoverMode: "allArgumentPoints",
                selectionMode: "allArgumentPoints",
                label: {
                    visible: true,
                    format: {
                        type: "fixedPoint",
                        precision: 2
                    }
                }, bar: {
                    color: SeriesColor
                },
            },
            series: [
            { valueField: "year2004", name: "2004" },
            { valueField: "year2001", name: "2001" }],
            title: Title,
            legend: {
                verticalAlignment: "bottom",
                horizontalAlignment: "center"
            },
            "export": {
                enabled: true
            }

        });
    }