diff --git a/src/demoData/sheetCell.js b/src/demoData/sheetCell.js index 667cde8..cf4faf8 100644 --- a/src/demoData/sheetCell.js +++ b/src/demoData/sheetCell.js @@ -1165,16 +1165,11 @@ const sheetCell = { }, "index": "0", "chart": [{ - "sheetIndex": "0", - "dataSheetIndex": "0", - "chartType": "column", - "row": "[1,3]", - "column": "[3,3]", - "chartStyle": "default", - "width": "480", - "height": "288", - "left": "67", - "top": "11" + "chart_id": "chart_5erpeWc1eWal_1596092336315", + "width": 400, + "height": 250, + "top": 30, + "left": 50 }], "status": "1", "order": "0", diff --git a/src/expendPlugins/chart/plugin.js b/src/expendPlugins/chart/plugin.js index 2a70cf3..3a781f2 100644 --- a/src/expendPlugins/chart/plugin.js +++ b/src/expendPlugins/chart/plugin.js @@ -65,12 +65,12 @@ function chart(data) { chartInfo.changeChartCellData = chartmix.default.changeChartCellData chartInfo.chart_selection = chart_selection() chartInfo.chartparam.jfrefreshchartall = jfrefreshchartall - chartInfo.chartparam.changeChartCellData = chartmix.default.changeChartCellData + chartInfo.chartparam.changeChartCellData = chartmix.default.changeChartCellData chartInfo.chartparam.renderChart = chartmix.default.renderChart // 初始化渲染图表 - for(let i = 0; i < data.length; i++){ - if(data[i].status == '1'){ + for (let i = 0; i < data.length; i++) { + if (data[i].status == '1') { renderCharts(data[i].chart) } } @@ -78,13 +78,48 @@ function chart(data) { } // rendercharts -function renderCharts(chartLists){ - +function renderCharts(chartLists) { + for (let i = 0; i < chartLists.length; i++) { + let chart = chartLists[i] + let chart_id_c = chart.chart_id + '_c' + let modelChartShowHTML = + '' + + let $t = $( + replaceHtml(modelChartShowHTML, { + id: chart_id_c, + addclass: 'luckysheet-data-visualization-chart', + title: '图表生成', + content: '' + }) + ).appendTo($('.luckysheet-cell-main')) + + let container = document.getElementById(chart_id_c) + + let { render, chart_json } = chartInfo.createChart($(`#${chart_id_c}`).children('.luckysheet-modal-dialog-content')[0], chartData, chart_id, rangeArray, rangeTxt) + chartInfo.currentChart = chart_json.chartOptions + console.dir(JSON.stringify(chart_json)) + + width = chart.width + height = chart.height + left = chart.left + top = chart.top + container.style.width = width + 'px' + container.style.height = height + 'px' + container.style.position = 'absolute' + container.style.background = '#fff' + container.style.left = left + 'px' + container.style.top = top + 'px' + render.style.width = '100%' + render.style.height = '100%' + container.style.zIndex = chartInfo.zIndex ? chartInfo.zIndex : 15 + chartInfo.zIndex++ + } } function jfrefreshchartall(flowdata1, r_st, r_ed, c_st, c_ed) { let chart = chartInfo.currentChart - if(!chart){ + if (!chart) { return } if (chart.rangeArray.length == 1) { @@ -92,12 +127,12 @@ function jfrefreshchartall(flowdata1, r_st, r_ed, c_st, c_ed) { var column = chart.rangeArray[0].column; //不在范围内的不更新 if ( - r_st > row[1] || - r_ed < row[0] || - c_st > column[1] || - c_ed < column[0] + r_st > row[1] || + r_ed < row[0] || + c_st > column[1] || + c_ed < column[0] ) { - return + return } //根据原有的范围取得数据 var luckysheetgetcellrange = formula.getcellrange( @@ -998,8 +1033,8 @@ function createLuckyChart(width, height, left, top) { // insert chartinfo let sheetFile = chartInfo.luckysheetfile[getSheetIndex(chartInfo.currentSheetIndex)]; - - if(!sheetFile.chart){ + + if (!sheetFile.chart) { sheetFile.chart = []; } sheetFile.chart.push({ @@ -1163,11 +1198,11 @@ function showNeedRangeShow(chart_id) { let chartLists = chartInfo.luckysheetfile[getSheetIndex(chartInfo.currentSheetIndex)].chart; for (let chartId in chartLists) { // if (chartLists[chartId].sheetIndex == chartInfo.currentSheetIndex) { - //当前sheet的图表先设置为false - chartLists[chartId].needRangeShow = false - if (chartLists[chartId].chart_id == chart_id) { - chartLists[chartId].needRangeShow = true - } + //当前sheet的图表先设置为false + chartLists[chartId].needRangeShow = false + if (chartLists[chartId].chart_id == chart_id) { + chartLists[chartId].needRangeShow = true + } // } } @@ -1180,8 +1215,8 @@ function hideAllNeedRangeShow() { let chartLists = chartInfo.luckysheetfile[getSheetIndex(chartInfo.currentSheetIndex)].chart; for (let chartId in chartLists) { // if (chartLists[chartId].sheetIndex == chartInfo.currentSheetIndex) { - //当前sheet的图表设置为false - chartLists[chartId].needRangeShow = false + //当前sheet的图表设置为false + chartLists[chartId].needRangeShow = false // } } @@ -1301,11 +1336,11 @@ function renderChartShow(index) { const luckysheetfile = chartInfo.luckysheetfile; luckysheetfile.forEach((file) => { //切换当前页的所有图表都显示出来 - if(file.index == index){ - - const chartLists = file.chart || []; + if (file.index == index) { - chartLists.forEach((chart)=>{ + const chartLists = file.chart || []; + + chartLists.forEach((chart) => { chart.isShow = true; $('#' + chart.chart_id + '_c').show(); @@ -1315,21 +1350,21 @@ function renderChartShow(index) { selectRangeBorderShow(chart.chart_id) } - }) - + }) + } - + // 隐藏其他页的图表 - else{ + else { const chartLists = file.chart || []; - chartLists.forEach((chart)=>{ + chartLists.forEach((chart) => { chart.isShow = false; $('#' + chart.chart_id + '_c').hide(); - }) + }) } }); } -export { chart, createLuckyChart, hideAllNeedRangeShow,renderChartShow } \ No newline at end of file +export { chart, createLuckyChart, hideAllNeedRangeShow, renderChartShow } \ No newline at end of file