如何使用Google图表更改条形和直线上的注释位置

时间：2018-08-01 01:35:27

标签： javascript charts google-visualization google-chartwrapper

Google图表上的

注释彼此堆叠。我想将它们分开，并根据其自身的条/线放置在适当的位置。 如下图所示。注解.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>

1 个答案:

答案 0 :(得分：1)

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

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>

相关问题
最新问题