gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:18:40 28 4
gpt4 key购买 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);
}

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

最佳答案

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

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

 ['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);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com