javascript - 如何使用谷歌图表更改条形和线条上的注释位置

Question

谷歌图表上的注释相互堆叠。我想将它们分开并根据它自己的条/线的位置将其放在适当的位置。类似于下图。 annotation.stem.length 移动但它们一起移动。我看到了也看到了解决方案here但它不工作/移动任何文本。它对我来说很先进，所以我很难修改。

Chart i want to achieve

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

function drawDSRPerformance() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Person', 'Booked Volume', 'Number of calls', 'Effective calls'],
    ['Almario',  8567,      213,         123],
    ['Anthony',  5489,      134,        75],
    ['Marvin',  1678,      256,        104],
    ['Jobert',  1890,      234,        156],
    ['Lysander',  2109,      167,         133]
  ]);
  
    var view = new google.visualization.DataView(data);
        view.setColumns(
          [0,1,2,3,
           { calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation" },
           { calc: "stringify",
            sourceColumn: 2,
            type: "string",
            role: "annotation" },
           { calc: "stringify",
            sourceColumn: 3,
            type: "string",
            role: "annotation" }
          ]);

  var options = {
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },
    annotations: {
      textStyle: {
        fontSize: 12,
        color: 'black',
        auraColor: 'none'
      }
    },
    vAxes: {
      0: {
        viewWindowMode:'explicit',
        viewWindow:{
          max:9000,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 10
        }
      },
      1: {
        viewWindow:{
          max:300,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 7
        }
      },
      2: {
        viewWindow:{
          max:300,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 7
        }
      }
    },
    seriesType: 'bars',
    series: {
      0: {
        targetAxisIndex: 0,
        color: '#FFFF00'
      },
      1: {
        type: 'line',
        targetAxisIndex: 1,
        color: '#4F81BD',
        pointShape: 'square',
        pointsVisible: true
      },
      2: {
        type: 'line',
        targetAxisIndex: 2,
        color: '#C0504D',
        pointShape: 'square',
        pointsVisible: true
      }
    },
    backgroundColor: '#B3A2C7',
    chartArea: {
      backgroundColor: '#E6E0EC'
    },
    legend: {
      position: 'bottom',
      alignment: 'center'
    }
  };
  var container = document.getElementById('dsr_performance');
  var chart = new google.visualization.ComboChart(container);
  
  // move annotations
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  
    chart.draw(view, options);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dsr_performance_container">
  <div id="dsr_performance" style="width: 100%; height: 300px;"></div>
</div>

Answer 1

在添加注解的时候，每个注解 Angular 色都应该跟在它所代表的系列列之后，
这将使注释更接近它的点......

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"
}]);

然而，这并不总能防止重叠

更改一组特定注释的词干长度，
放置 annotations series 中的选项选项...

series: {
  0: {
    targetAxisIndex: 0,
    color: '#FFFF00',
  },
  1: {
    annotations: {
      stem: {
        length: 8
      }
    },
    type: 'line',
    targetAxisIndex: 1,
    color: '#4F81BD',
    pointShape: 'square',
    pointsVisible: true
  },
  2: {
    annotations: {
      stem: {
        length: 4
      }
    },
    type: 'line',
    targetAxisIndex: 2,
    color: '#C0504D',
    pointShape: 'square',
    pointsVisible: true
  }
},

至于手动移动注解...
注释添加为 <text>元素，
我们必须确定 <text>来自其他 <text> 的注释元素元素，
例如轴标签、标题等。

您找到的代码在 <text> 上使用了两个属性标识注解的元素
'text-anchor' - 通常赋值为 'middle'注释
'fill' - <text> 的颜色元素

请参阅以下工作片段，
在这里，我们只移动条形图注释
我们必须使用 MutationObserver ,
否则图表会将它们移回悬停时的原始位置...

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

function drawDSRPerformance() {
  var data = google.visualization.arrayToDataTable([
    ['Person', 'Booked Volume', 'Number of calls', 'Effective calls'],
    ['Almario',  8567,      213,         123],
    ['Anthony',  5489,      134,        75],
    ['Marvin',  1678,      256,        104],
    ['Jobert',  1890,      234,        156],
    ['Lysander',  2109,      167,         133]
  ]);

  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 = {
    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },
    annotations: {
      textStyle: {
        fontSize: 12,
        auraColor: 'none'
      }
    },
    vAxes: {
      0: {
        viewWindowMode:'explicit',
        viewWindow:{
          max:9000,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 10
        }
      },
      1: {
        viewWindow:{
          max:300,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 7
        }
      },
      2: {
        viewWindow:{
          max:300,
          min:0
        },
        gridlines: {
          color: 'transparent',
          count: 7
        }
      }
    },
    seriesType: 'bars',
    series: {
      0: {
        targetAxisIndex: 0,
        color: '#FFFF00',
      },
      1: {
        annotations: {
          stem: {
            length: 8
          }
        },
        type: 'line',
        targetAxisIndex: 1,
        color: '#4F81BD',
        pointShape: 'square',
        pointsVisible: true
      },
      2: {
        annotations: {
          stem: {
            length: 4
          }
        },
        type: 'line',
        targetAxisIndex: 2,
        color: '#C0504D',
        pointShape: 'square',
        pointsVisible: true
      }
    },
    backgroundColor: '#B3A2C7',
    chartArea: {
      backgroundColor: '#E6E0EC'
    },
    legend: {
      position: 'bottom',
      alignment: 'center'
    }
  };
  var container = document.getElementById('dsr_performance');
  var chart = new google.visualization.ComboChart(container);

  // move annotations
  var observer = new MutationObserver(function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
      if ((annotation.getAttribute('text-anchor') === 'middle') &&
          (annotation.getAttribute('fill') === '#404040')) {
        var chartLayout = chart.getChartLayoutInterface();
        annotation.setAttribute('y',
          chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
        );
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dsr_performance_container">
  <div id="dsr_performance" style="width: 100%; height: 300px;"></div>
</div>