var timeday = new Array("今日", "昨日", "本周", "本月"); function getSpotHtml(htmlbody, i) { htmlbody += ""; htmlbody += ` ${timeday[i]} ${hispass[i]} ${hisfail[i]} ${hisstack[i]} ${hisrate[i]} `; htmlbody += ""; return htmlbody; } function getSpotHtml1(htmlbody, i) { htmlbody += ""; htmlbody += ` ${goodid[i]} ${goodpass[i]} ${goodfailrate[i]} `; htmlbody += ""; return htmlbody; } function getSpotHtml2(htmlbody, i) { htmlbody += ""; htmlbody += ` ${badid[i]} ${badpass[i]} ${badfailrate[i]} `; htmlbody += ""; return htmlbody; } function showEachSpot() { var htmlbody = "", one_person = ""; var i = 0; var triGap = 4; htmlbody = ""; for (i = 0; i < triGap; i++) { htmlbody = getSpotHtml(htmlbody, i); } $("#rank-one").html(htmlbody); console.log(htmlbody); } function showEachSpot1() { var htmlbody = "", one_person = ""; var i = 0; var triGap = 3; htmlbody = ""; for (i = 0; i < triGap; i++) { htmlbody = getSpotHtml1(htmlbody, i); } $("#rank-two").html(htmlbody); console.log(htmlbody); } function showEachSpot2() { var htmlbody = "", one_person = ""; var i = 0; var triGap = 3; htmlbody = ""; for (i = 0; i < triGap; i++) { htmlbody = getSpotHtml2(htmlbody, i); } $("#rank-three").html(htmlbody); console.log(htmlbody); } var i = 0, j = 0; function showChart() { var stackdata = []; var passdata = []; var faildata = []; var ratedata = []; var failmax = 0; var passmax = 0; var iddata = []; var summax = 0; var stackmax = 0; var ratemax = 0; for (i = 0; i < passNumber.length; i++) { passdata.push(passNumber[i]); faildata.push(failNumber[i]); stackdata.push(stackeverynum[i]); ratedata.push(failrate[i]); iddata.push(flownum[i]); if (ratemax < ratedata[i]) { ratemax = ratedata[i]; } if (passmax < passNumber[i]) { passmax = passNumber[i]; } if (failmax < passNumber[i]) { failmax = passNumber[i]; } if (stackmax < passNumber[i]) { stackmax = passNumber[i]; } } if (passmax < failmax) { passmax = failmax } if (passmax < stackmax) { passmax = stackmax; } showEachSpot(); showEachSpot1(); showEachSpot2(); stackAndFailChart = Highcharts.chart('graph-1', { chart: { zoomType: 'xy', height: (4 / 16 * 100) + '%' // 16:9 ratio }, title: { text: '各产线今日产能' }, credits: { enabled: false // 禁用版权信息 }, exporting: { enabled: false }, xAxis: [uaxv], yAxis: [{ // Primary yAxis labels: { format: '{value}', style: { color: Highcharts.getOptions().colors[0], fontSize: '1.5em' } }, min: 0, max: passmax * 1.5, title: { style: { color: Highcharts.getOptions().colors[0], fontSize: '1em' } } }, ], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'right', x: -100, verticalAlign: 'top', y: 0, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }, series: [{ name: '良品数', type: 'column', data: passdata, }, { name: '不良品数', type: 'column', data: faildata, }, { name: '堆积数', type: 'column', data: stackdata, },] }); FailChart = Highcharts.chart('graph-2', { chart: { height: (4 / 16 * 100) + '%' // 16:9 ratio }, title: { text: '各产线今日不良率' }, credits: { enabled: false // 禁用版权信息 }, exporting: { enabled: false }, xAxis: [uaxv], yAxis: [{ // Secondary yAxis title: { text: '不良率', style: { color: 'red', fontSize: '1em' } }, min: 0, max: 1.5 * ratemax, labels: { formatter: function () { return Math.floor(this.value) + "%"; }, style: { color: 'red', fontSize: '20px' } }, }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'right', x: -120, verticalAlign: 'top', y: 0, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' }, series: [{ name: '不良率', type: 'spline', data: ratedata, color: 'red', tooltip: { valueSuffix: '%' } }] }); } function updateChart() { var stackdata = []; var passdata = []; var faildata = []; var ratedata = []; var failmax = 0; var passmax = 0; var iddata = []; var summax = 0; var stackmax = 0; var ratemax = 0; for (i = 0; i < passNumber.length; i++) { passdata.push(passNumber[i]); faildata.push(failNumber[i]); stackdata.push(stackeverynum[i]); ratedata.push(failrate[i]); iddata.push(flownum[i]); if (ratemax < ratedata[i]) { ratemax = ratedata[i]; } if (passmax < passNumber[i]) { passmax = passNumber[i]; } if (failmax < passNumber[i]) { failmax = passNumber[i]; } if (stackmax < passNumber[i]) { stackmax = passNumber[i]; } } if (passmax < failmax) { passmax = failmax } if (passmax < stackmax) { passmax = stackmax; } // https://api.hcharts.cn/highcharts#Series.addPoint; stackAndFailChart.series[0].setData(passdata); stackAndFailChart.series[1].setData(faildata); stackAndFailChart.series[2].setData(stackdata); FailChart.series[0].setData(ratedata); showEachSpot(); showEachSpot1(); showEachSpot2(); } var stackAndFailChart = null; var FailChart = null; var uaxv = { crosshair: true, labels: { style: { fontSize: '1.5em' } }, categories: iddata, };