个人中心
gpt4 book ai didi

google-visualization - X 轴上带有双标签的谷歌折线图

转载 作者：行者123 更新时间：2023-12-02 03:08:46 25 4
gpt4 key购买 nike

我正在研究谷歌折线图，我想在 x 轴上加倍标签(日期明智的过程)，我可以使用以下代码绘制没有日期的图表，但无法填充日期，

<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});  
   </script>
</head>
<body>
    <div id="container"
        style="width: 1610px; height: 400px; margin-left:-120px;"></div>

    <script language="JavaScript">
\
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', '');
   data.addColumn('number', 'Suceess');
   data.addColumn('number', 'Error');
   data.addColumn('number', 'Warning');


    data.addRows([
     ['RE-LINK|',  266, 2136, 472],
        ['UPDATE-IB',  0, 1722, 2728],
        ['UPDATE-SA',  0, 43580, 87713],  
        ['CREATE-IB/SA', 0, 18920, 103690],
         ['TERMINATE-IB',  0, 2, 0],
          ['TERMINATE-COVERAGE',  3682, 5917, 0],
           ['ADD-COVERAGE AND CHANGE-SITE',  1101, 2433, 7887],
           ['day1--CREATE-IB',  36647,  0,1064]

    ]);
     data.addRows([
    ['RE-LINK',  11649, 221,    1127],
        ['UPDATE-IB',  0,   4844,   79886],
        ['UPDATE-SA',  0, 2961, 7377],  
        ['CREATE-IB/SA', 0, 3993,   13268],
         ['TERMINATE-IB',  4105, 0, 0],
          ['TERMINATE-COVERAGE',  1844, 10834, 0],
           ['day2--ADD-COVERAGE AND CHANGE-SITE',  218, 717,    10498]

    ]);
     data.addRows([
    ['RE-LINK',  3484,  3,  28],
        ['UPDATE-IB',  0, 139207,   238037],
        ['UPDATE-SA',  0, 3, 3],  
        ['CREATE-IB/SA', 0, 4598,   12680],
          ['TERMINATE-COVERAGE',  480,  1210,   90],
           ['day3--ADD-COVERAGE AND CHANGE-SITE',  1,   72, 2372]
    ]);
   data.addRows([



            ['RE-LINK',  7142,  465,    1427],
        ['UPDATE-IB',  0, 105719,   216275],
        ['UPDATE-SA',  0, 14761,    31698],  
        ['CREATE-IB/SA', 0, 5071,   14184],
         ['TERMINATE-IB',  18, 10, 0],
          ['TERMINATE-COVERAGE',  5265, 1280,   98],
           ['day4--ADD-COVERAGE AND CHANGE-SITE',  1173,    12474,  15545]
   ]);

   // Set chart options
   var options = {'title' : 'Applications status biz process wise(4 Days)',


      hAxis: {
         title: '',
         textStyle: {
            color: '#01579b',
            fontSize: 10,
            fontName: 'Arial',
            bold: true,
            italic: true
         }, 
         titleTextStyle: {
            color: '#01579b',
            fontSize: 12,
            fontName: 'Arial',
            bold: false,
            italic: true
         },
         slantedTextAngle:90
      },
      vAxis: {
         title: '',
         textStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
         },
         titleTextStyle: {
            color: '#1a237e',
            fontSize: 12,
            bold: true
         }
      }, 
      'width':1600,
      'height':400,   
      colors: ['#00ff00', '#ff0000','#ffe102'],
       legend: { position: 'top' },

   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.LineChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

I want to draw this chart

请帮帮忙....

最佳答案

虽然请求的布局无法通过标准配置选项获得，
如果您可以手动修改 svg，则可以实现

当图表的'ready' 事件触发时，添加类别标签和分组线

请参阅以下工作片段，这只是一个展示可能性的示例

根据图表的大小和位置做出了几个假设...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', '');
  data.addColumn('string', '');
  data.addColumn('number', 'Success');
  data.addColumn('number', 'Error');
  data.addColumn('number', 'Warning');
  data.addRows([
    [new Date('12/01/2016'), 'RE-LINK|',  266, 2136, 472],
    [new Date('12/01/2016'), 'UPDATE-IB',  0, 1722, 2728],
    [new Date('12/01/2016'), 'UPDATE-SA',  0, 43580, 87713],
    [new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
    [new Date('12/01/2016'), 'TERMINATE-IB',  0, 2, 0],
    [new Date('12/01/2016'), 'TERMINATE-COVERAGE',  3682, 5917, 0],
    [new Date('12/01/2016'), 'ADD-CVG / CHG-SITE',  1101, 2433, 7887],
    [new Date('12/01/2016'), 'day1--CREATE-IB',  36647,  0,1064]
  ]);
   data.addRows([
    [new Date('12/02/2016'), 'RE-LINK',  11649, 221,    1127],
    [new Date('12/02/2016'), 'UPDATE-IB',  0,   4844,   79886],
    [new Date('12/02/2016'), 'UPDATE-SA',  0, 2961, 7377],
    [new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993,   13268],
    [new Date('12/02/2016'), 'TERMINATE-IB',  4105, 0, 0],
    [new Date('12/02/2016'), 'TERMINATE-COVERAGE',  1844, 10834, 0],
    [new Date('12/02/2016'), 'ADD-CVG / CHG-SITE',  218, 717,    10498]
  ]);
   data.addRows([
    [new Date('12/03/2016'), 'RE-LINK',  3484,  3,  28],
    [new Date('12/03/2016'), 'UPDATE-IB',  0, 139207,   238037],
    [new Date('12/03/2016'), 'UPDATE-SA',  0, 3, 3],
    [new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598,   12680],
    [new Date('12/03/2016'), 'TERMINATE-COVERAGE',  480,  1210,   90],
    [new Date('12/03/2016'), 'ADD-CVG / CHG-SITE',  1,   72, 2372]
  ]);
  data.addRows([
    [new Date('12/04/2016'), 'RE-LINK',  7142,  465,    1427],
    [new Date('12/04/2016'), 'UPDATE-IB',  0, 105719,   216275],
    [new Date('12/04/2016'), 'UPDATE-SA',  0, 14761,    31698],
    [new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071,   14184],
    [new Date('12/04/2016'), 'TERMINATE-IB',  18, 10, 0],
    [new Date('12/04/2016'), 'TERMINATE-COVERAGE',  5265, 1280,   98],
    [new Date('12/04/2016'), 'ADD-CVG / CHG-SITE',  1173,    12474,  15545]
  ]);

  var view = new google.visualization.DataView(data);
  view.hideColumns([0]);

  var options = {
    chartArea: {
      height: 300,
      left: 60,
      top: 60
    },
    colors: ['#00ff00', '#ff0000','#ffe102'],
    hAxis: {
      title: '',
      textStyle: {
        color: '#01579b',
        fontSize: 10,
        fontName: 'Arial',
        bold: true,
        italic: true
      },
      titleTextStyle: {
        color: '#01579b',
        fontSize: 12,
        fontName: 'Arial',
        bold: false,
        italic: true
      },
      slantedTextAngle: 90
    },
    height: 600,
    legend: {
      position: 'top'
    },
    title: 'Applications status biz process wise(4 Days)',
    vAxis: {
      title: '',
      textStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      },
      titleTextStyle: {
        color: '#1a237e',
        fontSize: 12,
        bold: true
      }
    },
    width: 1600
  };

  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd-MMM-yy'
  });

  var container = document.getElementById('container');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var rowIndex = -1;
    var dateValue = null;
    var svgParent = container.getElementsByTagName('svg')[0];
    var labels = [];
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
      var groupLabel;
      // find hAxis labels
      if (text.hasAttribute('transform')) {
        rowIndex++;
        if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
          dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
          groupLabel = text.cloneNode(true);
          groupLabel.removeAttribute('transform');
          groupLabel.removeAttribute('font-style');
          groupLabel.setAttribute('fill', '#333333');
          groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
          groupLabel.textContent = dateValue;
          text.parentNode.appendChild(groupLabel);
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 0);
          }
          labels.push(groupLabel);
          addGroupLine(groupLabel, -24, -144);
        }
        if (rowIndex === (data.getNumberOfRows() - 1)) {
          if (labels.length > 0) {
            setLabelX(labels[labels.length - 1], text, 16);
          }
          addGroupLine(text, 18, -12);
        }
      }
    });

    // center group label
    function setLabelX(prevLabel, curLabel, xOffset) {
      prevLabel.setAttribute('x',
        parseFloat(prevLabel.getAttribute('x')) + xOffset +
        ((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
      );
    }

    // add group line
    function addGroupLine(text, xOffset, yOffset) {
      var parent = container.getElementsByTagName('g')[0];
      var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
      groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
      groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
      groupLine.setAttribute('width', '0.8');
      groupLine.setAttribute('height', '188');
      groupLine.setAttribute('stroke', '#333333');
      groupLine.setAttribute('stroke-width', '1');
      groupLine.setAttribute('fill', '#333333');
      groupLine.setAttribute('fill-opacity', '1');
      parent.appendChild(groupLine);
    }
  });

  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

关于google-visualization - X 轴上带有双标签的谷歌折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40993864/

25 4 0
文章推荐： angularjs - 无法从状态 'state1' 解析 'state2'
文章推荐： java - try catch 选择菜单
文章推荐： java - XMLEventReader Stax API 无法获取 JDK 1.8 中属性的名称和值
文章推荐： amazon-web-services - 无权执行 : aws-marketplace:ViewSubscriptions on resource: *
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com