统计图（折线，饼图等）避免多个统计图显示冲突

chart.js链接：

https://chartjs.bootcss.com/samples/

 引入的js：

<script src="~/ace/assets/js/Chart.bundle.js"></script>
<script src="~/ace/assets/js/utils.js"></script>

 

//第一个统计图
<div class="widget-main padding-4">
                                <div style="width:100%;">
                                    <canvas id="canvas"></canvas>
                                </div>
                            </div>
//第二个统计图
 <div class="maincontent" style="">
                        <div id="canvas-holder" style="width:100%">
                            <canvas id="chart_area"></canvas>
                        </div>
                    </div>
//第三个统计图
<div class="maincontent" style="padding:0px 10px 15px 10px;">
                        <div class="subtitle3"><span>检测数据上传时间段统计</span></div>
                        <div id="container" style="width: 100%;">
                            <canvas id="canvasthree"></canvas>
                        </div>
                    </div>

<script type="text/javascript">


    function Chartone() {
//转json，得到数据
        var arr = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.WeeklyT))');
        var WeeklyTNum = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.WeeklyTNum))');
        console.log("第一个图");
        //console.log(WeeklyTNum);
        var config = {
            type: 'line',
            data: {
                labels: arr,
                //labels: ['diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou', 'diyizhou'],
                datasets: [{
                    label: '检测数量',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: WeeklyTNum,
                    fill: false,
                }
                ]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    //text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            //labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            //labelString: 'Value'
                        }
                    }]
                }
            }
        };
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
    }

    function ChartTwo() {
        var CheckMoreCompany = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.CheckMoreCompany))');
        var CheckMoreTotal = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.CheckMoreTotal))');

        console.log("第二个图");
        var chart_area = $('#chart_area').css({ 'width': '100%' });
        var randomScalingFactor = function () {
            return Math.round(Math.random() * 100);
        };

        var configtwo = {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: CheckMoreTotal,
                    backgroundColor: [
                        window.chartColors.red,
                        window.chartColors.orange,
                        window.chartColors.yellow,
                        window.chartColors.green,
                        window.chartColors.blue,
                    ],
                    label: 'Dataset 1'
                }],
                labels: CheckMoreCompany
            },
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    //text: 'Chart.js Doughnut Chart'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        var ctxs = document.getElementById('chart_area').getContext('2d');
        window.myDoughnut = new Chart(ctxs, configtwo);
    }

    function ChartThree() {
        console.log("第三个图");
        //var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        var UploadDateHour = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.UploadDateHour))');
        var UploadDateCountNum = JSON.parse('@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewBag.UploadDateCountNum))');
        console.log("时间：" + UploadDateHour);
        console.log("数量：" + UploadDateCountNum);
        var color = Chart.helpers.color;
        var horizontalBarChartData = {
            labels: UploadDateHour,
            datasets: [
            {
                label: "数量",
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                data: UploadDateCountNum
            }
            ]

        };

        var ctx = document.getElementById('canvasthree').getContext('2d');
        window.myHorizontalBar = new Chart(ctx, {
            type: 'horizontalBar',
            data: horizontalBarChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                    }
                },
                responsive: true,
                legend: {
                    position: 'right',
                }
            }
        });
    }


//按顺序加载 已写好的chart显示方法 避免多个统计图显示冲突
    onload = function () {
        console.log("开始加载");
        Chartone();
        ChartTwo();
        ChartThree();
        //conshow();
    }
</script>

 

 public ActionResult s(string s)
        {
            //此处不能为空 本地测试测试 
            //s = "{\"sTable\":[ {\"RegionID\": \"1802010000\",\"BeginTime\": \"2021-12-07\",\"EndTime\": \"2021-12-09\",\"sTime\": \" 2021-12-19 \"}]}";
            
            if (s!=null)
            {
                var js = JsonConvert.DeserializeObject<STables.STable>(s);
                var sTable = js.sTable;
                ViewBag.STables = sTable[0];
                var bgT = sTable[0].BeginTime; ViewBag.bgT = bgT;
                var EndT = sTable[0].EndTime; ViewBag.EndT = EndT;
                var Rg = sTable[0].RegionID; ViewBag.Rg = Rg;
                //string sTime = Convert.ToDateTime(sTable[0].sTime).ToString("yyyy-MM-dd");
                string sTime = sTable[0].sTime.ToString();
                ViewBag.sTime = sTime;

                //获取TOKEN
                string token = Common.FuFunctions.MD5("", "", "ant");
                ViewBag.Token = token;
                //触发api  
                SMSService sm = new SMSService();
                var sms = sm.SmsReportData(token, Rg, sTime);

                //本地测试测试 
                //var sms = "{\"Result\": {\"data\": {\"Table\": [{\"RegionName\": \"崇明区\",\"CheckNum\": \"15\",\"HGS\": \"15\",\"BHGS\": \"0\",\"HGL\": \"100.00\",\"Difference\": \"3.57%\",\"NowWeek\": \"2020年第50周\"}],\"Table1\": [{\"WeeklyT\": \"2020年第53周\",\"WeeklyTNum\": \"60\"},{\"WeeklyT\": \"52\",\"WeeklyTNum\": \"12\"},{\"WeeklyT\": \"51\",\"WeeklyTNum\": \"577\"},{\"WeeklyT\": \"50\",\"WeeklyTNum\": \"303\"},{\"WeeklyT\": \"49\",\"WeeklyTNum\": \"311\"},{\"WeeklyT\": \"48\",\"WeeklyTNum\": \"730\"},{\"WeeklyT\": \"47\",\"WeeklyTNum\": \"870\"},{\"WeeklyT\": \"46\",\"WeeklyTNum\": \"734\"},{\"WeeklyT\": \"45\",\"WeeklyTNum\": \"1272\"},{\"WeeklyT\": \"44\",\"WeeklyTNum\": \"1320\"},{\"WeeklyT\": \"43\",\"WeeklyTNum\": \"1339\"},{\"WeeklyT\": \"42\",\"WeeklyTNum\": \"1580\"},{\"WeeklyT\": \"41\",\"WeeklyTNum\": \"500\"},{\"WeeklyT\": \"40\",\"WeeklyTNum\": \"975\"},{\"WeeklyT\": \"39\",\"WeeklyTNum\": \"1718\"},{\"WeeklyT\": \"38\",\"WeeklyTNum\": \"1566\"},{\"WeeklyT\": \"37\",\"WeeklyTNum\": \"2230\"},{\"WeeklyT\": \"36\",\"WeeklyTNum\": \"1799\"},{\"WeeklyT\": \"35\",\"WeeklyTNum\": \"1612\"},{\"WeeklyT\": \"34\",\"WeeklyTNum\": \"1838\"}],\"Table2\": [{\"ProvinceNum\": \"0\",\"CityNum\": \"0\",\"DistrictNum\": \"1\",\"CountyNum\": \"0\",\"TownshipNum\": \"2\",\"TownNum\": \"16\",\"AutonomousPrefectureNum\": \"0\",\"TotalNum\": \"19\",\"CheckAccountNum\": \"33\",\"EnterpriseAccountNum\": \"1\"}],\"Table3\": [{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"新桥镇\",\"LinkPerson\": \"里斯\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"大桥镇\",\"LinkPerson\": \"王二\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"小桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"刘五\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"城桥镇\",\"LinkPerson\": \"张三\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"14\",\"TownshipCheckHGS\": \"14\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加16.67%\"},{\"TownshipName\": \"竖新镇\",\"LinkPerson\": \"竖新镇农产品质量安全监管站\",\"LinkTel\": \"\",\"TownshipCheckNum\": \"1\",\"TownshipCheckHGS\": \"1\",\"TownshipCheckBHGS\": \"0\",\"TownshipCheckHGL\": \"100.00\",\"TownshipCheckDifference\": \"增加0.00%\"}],\"Table4\": [{\"TopThreeSample\": \"韭菜\",\"TTSCheckTotal\": \"1\",\"TTSCheckHGS\": \"1\",\"TTSCheckBHGS\": \"5\",\"TTSCheckHGL\": \"50.00\",\"TTSCheckDifference\": \"增加10.00%\"},{\"TopThreeSample\": \"韭菜2\",\"TTSCheckTotal\": \"1\",\"TTSCheckHGS\": \"1\",\"TTSCheckBHGS\": \"0\",\"TTSCheckHGL\": \"60.00\",\"TTSCheckDifference\": \"增加16.67%\"},{\"TopThreeSample\": \"韭菜\",\"TTSCheckTotal\": \"1\",\"TTSCheckHGS\": \"1\",\"TTSCheckBHGS\": \"0\",\"TTSCheckHGL\": \"100.00\",\"TTSCheckDifference\": \"下降0.00%\"}],\"Table5\": [{\"BHGSampleRank\": \"草莓\",\"SampleRankCheckTotalNum\": \"14\",\"SampleRankCheckHGS\": \"14\",\"SampleRankCheckBHGS\": \"0\",\"SampleRankCheckHGL\": \"100.00\"},{\"BHGSampleRank\": \"韭菜\",\"SampleRankCheckTotalNum\": \"1\",\"SampleRankCheckHGS\": \"1\",\"SampleRankCheckBHGS\": \"0\",\"SampleRankCheckHGL\": \"100.00\"}],\"Table6\": [{\"BHGCheckProjectRank\": \"烯酰吗啉\",\"CPRankCheckTotalNum\": \"3\",\"CPRankCheckHGS\": \"3\",\"CPRankCheckBHGS\": \"0\",\"CPRankCheckHGL\": \"100.00\"},{\"BHGCheckProjectRank\": \"克百威\",\"CPRankCheckTotalNum\": \"3\",\"CPRankCheckHGS\": \"3\",\"CPRankCheckBHGS\": \"0\",\"CPRankCheckHGL\": \"100.00\"},{\"BHGCheckProjectRank\": \"菊酯类农药残留\",\"CPRankCheckTotalNum\": \"3\",\"CPRankCheckHGS\": \"3\",\"CPRankCheckBHGS\": \"0\",\"CPRankCheckHGL\": \"100.00\"},{\"BHGCheckProjectRank\": \"腐霉利\",\"CPRankCheckTotalNum\": \"1\",\"CPRankCheckHGS\": \"1\",\"CPRankCheckBHGS\": \"0\",\"CPRankCheckHGL\": \"100.00\"},{\"BHGCheckProjectRank\": \"毒死蜱\",\"CPRankCheckTotalNum\": \"2\",\"CPRankCheckHGS\": \"2\",\"CPRankCheckBHGS\": \"0\",\"CPRankCheckHGL\": \"100.00\"}],\"Table7\": [{\"CheckMoreCompany\": \"张三\",\"CheckMoreTotal\": \"14\"},{\"CheckMoreCompany\": \"竖新镇农产品质量安全监管站\",\"CheckMoreTotal\": \"1\"}],\"Table8\": [{\"UploadDateHour\": \"16:00\",\"UploadDateCountNum\": \"14\"},{\"UploadDateHour\": \"9\",\"UploadDateCountNum\": \"1\"}],\"Table9\": [{\"NotUploadCompany\": \"堡镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"长兴镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"陈家镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"城桥镇农产品安全监管站\"},{\"NotUploadCompany\": \"崇明区农业农村委员会管理员\"},{\"NotUploadCompany\": \"崇明区现代农业园区\"},{\"NotUploadCompany\": \"东平镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"港西镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"港沿镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"横沙乡农产品质量安全监管站\"},{\"NotUploadCompany\": \"建设镇农产品安全监管站\"},{\"NotUploadCompany\": \"绿华镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"庙镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"三星镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"上海泛信农业种植专业合作社\"},{\"NotUploadCompany\": \"上海建星蔬菜专业合作社\"},{\"NotUploadCompany\": \"上海日鑫农业种植专业合作社\"},{\"NotUploadCompany\": \"上海市崇明区动物疫病预防控制中心\"},{\"NotUploadCompany\": \"上海市崇明区农业技术推广中心\"},{\"NotUploadCompany\": \"上海市崇明区农业农村委员会执法大队\"},{\"NotUploadCompany\": \"上海市崇明区蔬菜科学技术推广站\"},{\"NotUploadCompany\": \"上海市崇明区水产技术推广站\"},{\"NotUploadCompany\": \"上海享农果蔬专业合作社\"},{\"NotUploadCompany\": \"上海一农果蔬专业合作社\"},{\"NotUploadCompany\": \"上海由由农业科技有限公司\"},{\"NotUploadCompany\": \"上海玉英蔬果专业合作社\"},{\"NotUploadCompany\": \"上海正泰农业科技有限公司\"},{\"NotUploadCompany\": \"向化镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"新村乡农产品质量安全监管站\"},{\"NotUploadCompany\": \"新海镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"新河镇农产品质量安全监管站\"},{\"NotUploadCompany\": \"中兴镇农产品质量监督站\"}]}}}";
                                
                if (!string.IsNullOrEmpty(sms))
                {
                    var json = JsonConvert.DeserializeObject<SMSModels.Model>(sms);
                    //var sjson = JObject.Parse(sms);   
              
                    //Table1  统计图
                    if (json.Result.data.Table1 != null && json.Result.data.Table1.Count > 0)
                    {
                        ViewBag.tb = json.Result.data.Table1;
                        var a = json.Result.data.Table1;
                        ViewBag.WeeklyT = a.Select(g => g.WeeklyT).ToList();
                        ViewBag.WeeklyTNum = a.Select(g => g.WeeklyTNum).ToList();
                    }
                    else
                    {
                        ViewBag.tb = null;
                        ViewBag.WeeklyT = "";
                        ViewBag.WeeklyTNum = "0";

                    }
                    //Table7 统计图 
                    if (json.Result.data.Table7 != null && json.Result.data.Table7.Count > 0)
                    {
                        ViewBag.tb7 = json.Result.data.Table7;
                          ViewBag.CheckMoreCompany = json.Result.data.Table7.Select(b=>b.CheckMoreCompany).ToList();
                          ViewBag.CheckMoreTotal = json.Result.data.Table7.Select(b => b.CheckMoreTotal).ToList();
                    }
                    else
                    {
                        ViewBag.tb7 = null;
                        ViewBag.CheckMoreCompany = "";
                        ViewBag.CheckMoreTotal = "";
                    }
                    //Table8 统计图 
                    if (json.Result.data.Table8 != null && json.Result.data.Table8.Count > 0)
                    {
                        ViewBag.tb8 = json.Result.data.Table8;
                        ViewBag.UploadDateHour = json.Result.data.Table8.Select(b => b.UploadDateHour).ToList();
                        ViewBag.UploadDateCountNum = json.Result.data.Table8.Select(b => b.UploadDateCountNum).ToList();
                    }
                    else { 
                        ViewBag.tb8 = null;
                        ViewBag.UploadDateHour = "";
                        ViewBag.UploadDateCountNum = "";
                    
                    }
                  

                }
            }
           

            return View();
        }