时间戳

首页 > 解决方案 > 如何使用谷歌图表更改条形和线条上的注释位置

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

问题描述

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

我想要达到的图表

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>

标签： javascriptchartsgoogle-visualization

解决方案

添加注释时，每个注释角色都应遵循它所代表的系列列，
这将使注释更接近其点... 

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'for annotations -元素
'fill'的颜色<text>

请参阅以下工作片段，
在这里，我们只会移动
必须使用的条形注释 a 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>

推荐阅读