gpt4 book ai didi

javascript - Google Charts - 带有 slider 的显示列的总和

转载 作者:行者123 更新时间:2023-11-29 14:38:43 24 4
gpt4 key购买 nike

我制作了一个带有日期 slider 的仪表板,该 slider 可以更改图表显示的内容。我找不到对显示的列总数求和的方法。

https://jsfiddle.net/2uktvcut/

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

function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "Total"],
[new Date("1/1/17"), 13],
[new Date("1/2/17"), 15],
[new Date("1/3/17"), 15],
[new Date("1/4/17"), 23],
[new Date("1/5/17"), 51],
[new Date("1/6/17"), 17],
[new Date("1/7/17"), 11],
[new Date("1/8/17"), 18],
[new Date("1/9/17"), 8],
[new Date("1/10/17"), 34],
[new Date("1/11/17"), 13],
[new Date("1/12/17"), 21]
]);

var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));

var dateSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'marketingChartControl',
'options': {
'filterColumnLabel': 'Date',
}
});

var stockChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'marketingChart',
options: {
theme: 'material',
legend: {
position: 'bottom',
},
focusTarget: 'category',
chartArea: {
width: '95%',
height: '90%',
},
width: $(document).width() * 0.98,
height: $(document).height() * .70,
vAxis: {
viewWindow: {
min: 0,
},
},
}
});

google.visualization.events.addListener(stockChart, 'ready', function() {
document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';

var dt = stockChart.getDataTable();
console.log(dt);
});

dashboard.bind(dateSlider, stockChart);

dashboard.draw(data);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<div id="marketingChartHolder">
<div id="marketingChartControl" style="width: 100%"></div>
<div id="marketingChart"></div>
<div id='png'></div>
<div id="totalHolder">
<p>
Placeholder
</p>
</div>
</div>

我认为我已经开始使用 stockChart.getDataTable()但是我不确定如何进行。

获得值后,我打算使用 jquery 更改 <p> 的值.

最佳答案

您可以使用 group()聚合数据的方法

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

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

function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "Total"],
[new Date("1/1/17"), 13],
[new Date("1/2/17"), 15],
[new Date("1/3/17"), 15],
[new Date("1/4/17"), 23],
[new Date("1/5/17"), 51],
[new Date("1/6/17"), 17],
[new Date("1/7/17"), 11],
[new Date("1/8/17"), 18],
[new Date("1/9/17"), 8],
[new Date("1/10/17"), 34],
[new Date("1/11/17"), 13],
[new Date("1/12/17"), 21]
]);

var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));

var dateSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'marketingChartControl',
'options': {
'filterColumnLabel': 'Date',
}
});

var stockChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'marketingChart',
options: {
theme: 'material',
legend: {
position: 'bottom',
},
focusTarget: 'category',
chartArea: {
width: '95%',
height: '90%',
},
width: $(document).width() * 0.98,
height: $(document).height() * .70,
vAxis: {
viewWindow: {
min: 0,
},
},
}
});

google.visualization.events.addListener(dateSlider, 'statechange', calcTotal);

google.visualization.events.addListener(stockChart, 'ready', function () {
document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';
calcTotal();
});

function calcTotal() {
var dataTotal = google.visualization.data.group(
stockChart.getDataTable(),
[{column: 0, type: 'string', modifier: function () {return 'Total';}}],
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: 'Total',
type: 'number'
}
]
);

var container = document.getElementById('totalHolder');
var table = new google.visualization.Table(container);
table.draw(dataTotal);
}

dashboard.bind(dateSlider, stockChart);

dashboard.draw(data);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<div id="marketingChartHolder">
<div id="marketingChartControl" style="width: 100%"></div>
<div id="marketingChart"></div>
<div id='png'></div>
<div id="totalHolder"></div>
</div>

关于javascript - Google Charts - 带有 slider 的显示列的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41768028/

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