Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 在谷歌条形图上绘制直线(组合)

In lại 作者：行者123 更新时间：2023-12-02 23:18:40 28 4
mua khóa gpt4 Nike

我一定会在我的一个项目中使用谷歌图表。我需要的是，显示一个条形图，并且在条形图中，与每个条形相交的线代表另一个值。如果您查看下面的 jsfiddle，您会发现折线图仅与中间的条形图相交，并继续向其他条形图移动。

https://jsfiddle.net/ark7qbsc/

例如，如果您查看“Apples”，则该线在 y=2.5 处与整个条形图(从开始到结束)相交并在条形图内结束，而不是在空白处徘徊，也不去其他酒吧。

有人可以帮我解决这个问题吗(仅使用谷歌图表。)

我厌倦了在每个数据行之后注入(inject)空值，这至少会从空白中删除该行。然而，现在条形的中心只有一个点。寻找一种将其扩展到整个条宽度的方法。

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

        function drawVisualization() {
    // Some raw data (not necessarily accurate)
 var data = google.visualization.arrayToDataTable([
           ['Fruit', 'Jane', 'Average'],
           ['Apples', 3, 2.5],
           ['Oranges', 2, 1.5],
           ['Pears', 4, 3],
           ['Bananas', 3, 2],
           ['Plums', 4, 3]      
        ]);

        // Set chart options
        var options = {
           title : 'Fruits distribution',
           vAxis: {title: 'Fruits'},
           hAxis: {title: 'Person'},
           seriesType: 'bars',
           series: {1:{type: 'line'}}
        };

        // Instantiate and draw the chart.
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
  }

从开始到结束似乎无法在栏中包含一行

1 Câu trả lời

使用标准方法/选项是不可能的，
但我们可以在图表的就绪事件上绘制自定义线条。

在行之间添加空值以换行。 

 ['Fruit', 'Jane', 'Average'],
 ['Apples', 3, 2.5],
 [null, null, null],
 ['Oranges', 2, 1.5],
 [null, null, null],

我们可以使用以下选项将条形图拉得更近。 

bar: {
  groupWidth: '95%'
},

然后我们可以使用圆圈来放置自定义线条。
我们可以使用图表的布局界面来查找条形的宽度。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
     ['Fruit', 'Jane', 'Average'],
     ['Apples', 3, 2.5],
     [null, null, null],
     ['Oranges', 2, 1.5],
     [null, null, null],
     ['Pears', 4, 3],
     [null, null, null],
     ['Bananas', 3, 2],
     [null, null, null],
     ['Plums', 4, 3]
  ]);

  var options = {
    bar: {
      groupWidth: '95%'
    },
    title : 'Fruits distribution',
    vAxis: {title: 'Fruits'},
    hAxis: {title: 'Person'},
    seriesType: 'bars',
    series: {1:{type: 'line'}}
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    // get chart layout and svg
    var chartLayout = chart.getChartLayoutInterface();
    var svg = document.querySelector('#chart_div svg');
    var svgNS = svg.namespaceURI;

    // process each circle
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle, index) {
      // find width of the bar
      var bounds = chartLayout.getBoundingBox('bar#0#' + (index * 2));

      // create line
      var line = document.createElementNS(svgNS, 'rect');
      line.setAttribute('x', parseFloat(circle.getAttribute('cx')) - (bounds.width / 2));
      line.setAttribute('y', parseFloat(circle.getAttribute('cy')));
      line.setAttribute('width', bounds.width);
      line.setAttribute('height', 1);
      line.setAttribute('stroke', circle.getAttribute('fill'));
      line.setAttribute('stroke-width', 2);
      line.setAttribute('fill', circle.getAttribute('fill'));
      circle.parentNode.appendChild(line);
    });
  });

  chart.draw(data, options);
});

关于javascript - 在谷歌条形图上绘制直线(组合)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57048624/

28 4 0
Bài viết được đề xuất: azure - 如何从 Analytics Application Insights 获取 Qna Maker "Q"？
Bài viết được đề xuất: nhibernate - 正确使用NHibernate工作单元模式和Ninject
Bài viết được đề xuất: powershell - 对于ACR中的存储库数量，输出返回错误结果
Bài viết được đề xuất: 使用 Terraform 的 Azure 容器注册表权限
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com