Google Chart - 负值/正值注释位置

时间：2017-08-05 09:41:27

标签： javascript charts google-visualization

我已经得到了下面的柱形图，我想在上面给出正值的注释，对于列的负值。怎么做？

值和注释格式的附加问题 - 如何实现注释的格式化（上面的值和下面的列），如vAxis？

my Google Chart

＆＃13;
＆＃13; 
$(document).ready(function() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext("2d");
    var global = {
        scale: 1,
        offset: {
            x: 0,
            y: 0,
        },
    };
    var panning = {
        start: {
            x: null,
            y: null,
        },
        offset: {
            x: 0,
            y: 0,
        },
    };
    var systems = '../js/json/eveSystems.json';

    fitToContainer(canvas);

    $.getJSON(systems, function(data) {

        function draw() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            data.forEach(function(systemData) {
                var coordX = systemData.position.x / 100000000000000;
                var coordY = systemData.position.y / 100000000000000;

                ctx.beginPath();
                ctx.arc(coordX,coordY,20,0,2*Math.PI);
                ctx.stroke();
            });
        }

        draw();

        canvas.addEventListener("mousedown", startPan);

        function pan() {
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(panning.offset.x, panning.offset.y);
            console.log(panning.offset.x);
            draw();
        }

        function startPan(e) {
            window.addEventListener("mousemove", trackMouse);
            window.addEventListener("mousemove", pan);
            window.addEventListener("mouseup", endPan);
            panning.start.x = e.clientX;
            panning.start.y = e.clientY;
        }

        function endPan(e) {
            window.removeEventListener("mousemove", trackMouse);
            window.removeEventListener("mousemove", pan);
            window.removeEventListener("mouseup", endPan);
            panning.start.x = null;
            panning.start.y = null;
            global.offset.x = panning.offset.x;
            global.offset.y = panning.offset.y;
        }

        function trackMouse(e) {
            var offsetX  = e.clientX - panning.start.x;
            var offsetY  = e.clientY - panning.start.y;
            panning.offset.x = global.offset.x + offsetX;
            panning.offset.y = global.offset.y + offsetY;
        }
    });

    function fitToContainer(canvas){
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }

});
＆＃13; 
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});

function drawChart()
{
  var data = new google.visualization.DataTable();
  data.addColumn('date','Datum');
  data.addColumn('number','Vrijednost');
  data.addColumn('number','Pred. prema preth. 5 dana');
  data.addColumn('number','Pred. prema preth. 10 dana');
  data.addColumn('number','Relativna promjena');
  data.addRows([
  [new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
  [new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
  [new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
  [new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
  [new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
  [new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
  [new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
  [new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
  [new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
  [new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
  [new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
  [new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
  [new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
  [new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
  [new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
  [new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
  [new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
  [new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
  [new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
  [new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
  [new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
  [new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
  [new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
  [new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
  [new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
  ]);

  var ColumnOpt = {
    height: 300,
    title: 'Relativna promjena vrijednosti [%]',
    annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
    vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
    viewWindow: {min: data.getColumnRange(4).min-0.5}},
    hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
    chartArea: {width: '80%', height: '80%'},
    legend: {position: 'none'},
    colors: ['purple']
  };
  
  var view2 = new google.visualization.DataView(data);
  view2.setColumns([0,4,{calc:'stringify',sourceColumn:4,type:'string',role:'annotation'}]);

  var container = document.getElementById('Chart2');
  var chart2=new google.visualization.ColumnChart(container);

  var observer = new MutationObserver(function () {
    $.each($('text[text-anchor="start"]'), function (index, label) {
      var labelValue = parseFloat($(label).text());
      if (labelValue < 0 && $(label).attr('font-height') !== 'bold') {
        var bounds = label.getBBox();
        var chartLayout = container.getChartLayoutInterface();
        $(label).attr('y',chartLayout.getYLocation(labelValue) - bounds.height - 8);
      }
    });
  });
  observer.observe(container,{childList: true,subtree: true});

  chart2.draw(view2,ColumnOpt);
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这里要处理的几个问题

在此图表上，注释具有属性 - ＆gt; text-anchor="middle"
与另一方的text-anchor="start"相对照

格式化注释，使用数字格式器

  var formatAnnotation = new google.visualization.NumberFormat({
    pattern: ColumnOpt.vAxis.format
  });

在视图上使用自定义函数，而不是预定义的"stringify"函数

var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{
  calc: function (dt, row) {
    return formatAnnotation.formatValue(dt.getValue(row, 4));
  },
  type: 'string',
  role: 'annotation'
}]);

这引起了数字中逗号的问题 需要用parseFloat的十进制替换来处理ok

注释重叠也存在问题

但是这个片段可以让你更接近......

＆＃13;
＆＃13; 
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});

function drawChart()
{
  var data = new google.visualization.DataTable();
  data.addColumn('date','Datum');
  data.addColumn('number','Vrijednost');
  data.addColumn('number','Pred. prema preth. 5 dana');
  data.addColumn('number','Pred. prema preth. 10 dana');
  data.addColumn('number','Relativna promjena');
  data.addRows([
  [new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
  [new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
  [new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
  [new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
  [new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
  [new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
  [new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
  [new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
  [new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
  [new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
  [new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
  [new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
  [new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
  [new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
  [new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
  [new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
  [new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
  [new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
  [new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
  [new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
  [new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
  [new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
  [new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
  [new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
  [new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
  ]);

  var ColumnOpt = {
    height: 300,
    title: 'Relativna promjena vrijednosti [%]',
    annotations: {alwaysOutside: true, textStyle: {fontName: 'Tahoma', fontSize: 9}, stem: {length: 4, color: 'transparent'}},
    vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
    viewWindow: {min: data.getColumnRange(4).min-0.5}},
    hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
    chartArea: {width: '80%', height: '80%'},
    legend: {position: 'none'},
    colors: ['purple']
  };

  var formatAnnotation = new google.visualization.NumberFormat({
    pattern: ColumnOpt.vAxis.format
  });

  var view2 = new google.visualization.DataView(data);
  view2.setColumns([0,4,{
    calc: function (dt, row) {
      return formatAnnotation.formatValue(dt.getValue(row, 4));
    },
    type: 'string',
    role: 'annotation'
  }]);
  
  var container = document.getElementById('Chart2');
  var chart2=new google.visualization.ColumnChart(container);

  var observer = new MutationObserver(function () {
    $.each($('text[text-anchor="middle"]'), function (index, label) {
      var labelValue = parseFloat($(label).text().replace(',', '.'));
      if (labelValue < 0 && $(label).attr('fill') === '#800080') {
        var bounds = label.getBBox();
        var chartLayout = chart2.getChartLayoutInterface();
        $(label).attr('y',chartLayout.getYLocation(labelValue) + bounds.height);
      }
    });
  });
  observer.observe(container,{childList: true,subtree: true});

  chart2.draw(view2,ColumnOpt);
}
＆＃13; 
<div id="Chart2"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题