如何在谷歌图表中显示总数

问题描述 投票:1回答:1

我想在列的末端显示每个堆叠列的总数.我不能完全解决如何在setColumns视图代码中总计列,我有以下。有谁能帮助最终确定这一点?

我希望在堆叠列的末端实现总计,就像这样:[![在此输入图片描述][1]][1] 。

这是我的代码,到目前为止,它可以用于图表,但不太适合显示总标签。

             myDrawFunc(){
              var data = new google.visualization.DataTable();

              data.addColumn('string', 'Scenario');

              for (var i = 0; i < rows.length; i++) {
                ptype = rows[i].cells[2].querySelector('.part').value;
                if (ptype.length > 0) {
                  console.log(ptype);
                  // Declare columns
                  data.addColumn('number', ptype);
                }
              }

              for (var i = 0; i < tcd.length; i++) {

                var dn = 1 + i;
                designLabel = "Design " + dn;
                tcd[i].unshift(designLabel);
              }

              data.addRows(tcd);

              //var view = new google.visualization.DataView(data);

              var view = getDataView(data);
            console.log(data);
              chart = new google.visualization.BarChart(document.getElementById('chart_div'));
              chart.draw(view, globalOptions);
            }

            //get Data view

            function getDataView(dataTable) {
              var dataView;
              var viewColumns = [];
              var columnsTotal = dataTable.getNumberOfColumns();

              for (var i = 0; i < columnsTotal; i++) {
                addViewColumn(viewColumns, i);

                //add extra columns 
                if (i == columnsTotal) {
                  pushExtraCols(viewColumns);
                }

              }

              // set series for displaying total columns
              createSeries(columnsTotal) ;

              dataView = new google.visualization.DataView(dataTable);

              dataView.setColumns(viewColumns);

              return dataView;
            }

            function addViewColumn(viewColumns, index) {

              viewColumns.push(index);
              if (index > 0) {
                viewColumns.push({
                  calc: function (dt, row) {
                    console.log(row, index);
                    return dt.getValue(row, index);
                  },
                  role: 'annotation',
                  type: 'number'
                });
              }
            }

            function createSeries(columnsTotal) {
              var seriesT = columnsTotal -  1;
              console.log(seriesT);

              seriesObj = {
                [seriesT]: {
                  annotations: {
                    stem: {
                      color: "transparent",
                      length: 128
                    },
                    textStyle: {
                      color: "red",
                    }
                  },
                  enableInteractivity: false,
                  tooltip: "none",
                  visibleInLegend: false
                }
              }
              globalOptions.series = seriesObj;
            }

            function pushExtraCols(viewColumns) {
              viewColumns.push(
                {
                  calc: function (dt, row) {
                    return 0;
                  },
                  label: "Total",
                  type: "number",
                });

              viewColumns.push({
                calc: function (dt, row) {
                  return getTotal(dt, row);
                },
                type: "number",
                role: "annotation"
              });

            }

            //add up row total per column
            function getTotal(dt, row) {

              total = 0;

              for (var i = 0; i  < dt.getNumberOfColumns()-1; i++) {

                  total += dt.getValue(row, i);
                }

              console.log("total=" + total);
              return total;
            }
charts google-visualization visualization
1个回答
1
投票

试试用parseInt

total = parseInt(total) + dt.getValue(row, i)
© www.soinside.com 2019 - 2024. All rights reserved.