如何在 ASP.NET 中使用 Google Charts API JavaScript 将条形标签显示为绝对值而不是负值

Question

我有一个堆积条形图，我想将显示的条形标签值更改为绝对值而不是负值。我使用负值只是为了正确绘制图表，但是，真实值不是负值。

忽略灰色条标签的位置误差，如何将图表视图和鼠标悬停显示的显示值 -676 更改为绝对值 (676)？

JavaScript：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

      google.charts.load('current', { packages: ['corechart'] });
      google.charts.setOnLoadCallback(drawChart);

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

          var jsonList = @(Json.Serialize(Model.listAllAircraftChartQuarterly))

          var title = 'Quarterly Aircraft Transaction Trend';

          data.addColumn('string', 'Quarter');
          data.addColumn('number', '2023');
          data.addColumn('number', '2022');
          data.addColumn('number', '% Change');
          data.addRows(jsonList.map((p) => {
              return [p.yearQuarter, p.year2top, p.year3bottom, p.year2percent];
          }));

          var formatPercent = new google.visualization.NumberFormat({ pattern: '#.#%' });
          formatPercent.format(data, 3);

          var view = new google.visualization.DataView(data);
          view.setColumns([0, 1,
              {
                  calc: "stringify",
                  sourceColumn: 1,
                  type: "string",
                  role: "annotation"
              },
              2,
              {
                  calc: "stringify",
                  sourceColumn: 2,
                  type: "string",
                  role: "annotation"
              },
              3,
              {
                  calc: "stringify",
                  sourceColumn: 3,
                  type: "string",
                  role: "annotation"
              }
          ]);
          var options = {
              title: title,
              titlePosition: 'out',
              isStacked: true,

              seriesType: "bars",
              vAxes: {
                  0: {
                      textPosition: 'out',
                      viewWindowMode: 'pretty',
                      title: "",
                      viewWindow: { min: -1100, max: 1100 },
                      gridlines: { color: 'lightgray' },
                  },
                  1: {
                      textPosition: 'out',
                      viewWindow: { min: -1, max: 1 },
                      format: 'percent',
                      gridlines: { color: 'transparent' }
                  },
              },
              series: {
                  0: { targetAxisIndex: 0, color: 'blue' },
                  1: { targetAxisIndex: 0, color: 'gray' },
                  2: { targetAxisIndex: 1, color: 'red', type: 'line', lineWidth: 1, lineDashStyle: [4, 4], pointSize: 5 },
              },
              width: '100%',
              height: '300',

              legend: { position: 'top' },
              chartArea: {
                  height: '100%',
                  width: '100%',
                  top: 48,
                  left: 60,
                  right: 60,
                  bottom: 75
              },
              annotations: {
                  highContrast: false,
                  textStyle: {
                      color: 'red',
                      fontSize: 12,
                      bold: true
                  },
                  alwaysOutside: true
              },
          }

          var chart = new google.visualization.ComboChart(document.getElementById('primaryYear2and3'));
          chart.draw(view, options);

          document.getElementById('downloadimg2and3').innerHTML = '<a download="google-chart-image" href="' + chart.getImageURI() +
              '"><button type="button" class="btn btn-outline-dark btn-sm opacity-25 ms-4 mb-3">Download Chart Image</button></a>';

          window.addEventListener('resize', drawChart, false);
      }
  </script>

研究了现有帖子的绝对值和 Math.abs() 用法。

Answer 1

您可以使用

Math.abs(numberValue)

来获取数字的绝对值。

至于在图表中使用它来进行显示，
你可以使用谷歌的NumberFormat类

首先，图表使用数字的格式化值进行注释和悬停时显示的值。

如果未提供格式化值，则使用默认格式化值，
这只是转换为字符串的数字。

在本例中，我们希望在加载数据表时格式化该值。

首先，创建数字格式化程序...

var formatNumber = new google.visualization.NumberFormat({ pattern: '#,##0' });

然后在加载数据表时，我们可以使用对象表示法提供值 (

v

) 和格式化值 (

f

)。
我们使用 NumberFormat 类中的

formatValue

方法来获取每个数字的格式化值，并将绝对值传递给它。

data.addRows(jsonList.map((p) => {
   return [
     p.yearQuarter,
     p.year2top,
     {v: p.year3bottom, f: formatNumber.formatValue(Math.abs(p.year3bottom))},
     p.year2percent
   ];
}));

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

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

  //var jsonList = @(Json.Serialize(Model.listAllAircraftChart))
  var jsonList = [
    {yearQuarter: 'Quarter 1', year2top: 469, year3bottom: -676, year2percent: -0.306},
    {yearQuarter: 'Quarter 2', year2top: 580, year3bottom: -739, year2percent: -0.215},
    {yearQuarter: 'Quarter 3', year2top: 566, year3bottom: -623, year2percent: -0.091},
    {yearQuarter: 'Quarter 4', year2top: 817, year3bottom: -800, year2percent: -0.01}
  ];

  var title = 'Quarterly Aircraft Transaction Trend';

  var formatNumber = new google.visualization.NumberFormat({ pattern: '#,##0' });

  data.addColumn('string', 'Quarter');
  data.addColumn('number', '2023');
  data.addColumn('number', '2022');
  data.addColumn('number', '% Change');
  data.addRows(jsonList.map((p) => {
     return [
       p.yearQuarter,
       p.year2top,
       {v: p.year3bottom, f: formatNumber.formatValue(Math.abs(p.year3bottom))},
       p.year2percent
     ];
  }));

  var formatPercent = new google.visualization.NumberFormat({ pattern: '#.#%' });
  formatPercent.format(data, 3);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
     {
         calc: "stringify",
         sourceColumn: 1,
         type: "string",
         role: "annotation"
     },
     2,
     {
         calc: "stringify",
         sourceColumn: 2,
         type: "string",
         role: "annotation"
     },
     3,
     {
         calc: "stringify",
         sourceColumn: 3,
         type: "string",
         role: "annotation"
     }
  ]);
  var options = {
     title: title,
     titlePosition: 'out',
     isStacked: true,

     seriesType: "bars",
     vAxes: {
         0: {
             textPosition: 'out',
             viewWindowMode: 'pretty',
             title: "",
             viewWindow: { min: -1100, max: 1100 },
             gridlines: { color: 'lightgray' },
         },
         1: {
             textPosition: 'out',
             viewWindow: { min: -1, max: 1 },
             format: 'percent',
             gridlines: { color: 'transparent' }
         },
     },
     series: {
         0: { targetAxisIndex: 0, color: 'blue' },
         1: { targetAxisIndex: 0, color: 'gray', annotations: {stem: {length: -80}} },
         2: { targetAxisIndex: 1, color: 'red', type: 'line', lineWidth: 1, lineDashStyle: [4, 4], pointSize: 5 },
     },
     width: '100%',
     height: '300',

     legend: { position: 'top' },
     chartArea: {
         height: '100%',
         width: '100%',
         top: 48,
         left: 60,
         right: 60,
         bottom: 75
     },
     annotations: {
         highContrast: false,
         textStyle: {
             color: 'red',
             fontSize: 12,
             bold: true
         },
         alwaysOutside: true
     },
  }

  var chart = new google.visualization.ComboChart(document.getElementById('primaryYear2and3'));
  chart.draw(view, options);

  google.visualization.events.addListener(chart, 'ready', function () {
    document.getElementById('downloadimg2and3').innerHTML = '<a download="google-chart-image" href="' + chart.getImageURI() +
       '"><button type="button" class="btn btn-outline-dark btn-sm opacity-25 ms-4 mb-3">Download Chart Image</button></a>';
  });

  window.addEventListener('resize', drawChart, false);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="primaryYear2and3"></div>
<div id="downloadimg2and3"></div>