谷歌图表：向烛台图表添加点
创建了一个阴阳烛图表，四分位数用于合唱青蛙活动。试图找出如何将实际数据点添加到图表中（使其成为组合图表）。
以下是烛台图的代码：
<!DOCTYPE html>
<html lang="en">
<head><title>
KHA
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html" target="_blank">https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['American Bullfrog (394)', 69, 137, 176, 225],
['American Toad (479)', 71, 99, 146, 187],
['Blanchards Cricket Frog (1476)', 78, 121, 168, 210],
['Boreal Chorus Frog (2410)', 55, 93, 160, 242],
['Chihuahuan Green Toad (24)', 124, 159, 188, 228],
['Crawfish Frog (212)', 67, 83, 111, 187],
['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201],
['Gray Treefrog complex (721)', 74, 118, 169, 202],
['Great Plains Toad (212)', 85, 130, 174, 242],
['Plains Leopard Frog (638)', 70, 103, 163, 242],
['Plains Spadefoot (165)', 85, 129, 177, 225],
['Red-spotted Toad (9)', 154, 154, 165, 165],
['Southern Leopard Frog (344)', 55, 84, 144, 200],
['Spotted Chorus Frog (163)', 80, 111, 153, 239],
['Spring Peeper (116)', 41, 63, 102, 146],
['Streckers Chorus Frog (100)', 57, 84, 110, 149],
['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211],
['Woodhouses Toad (553)', 83, 125, 173, 243],
// Hope it works.
], true);
var options = {
legend: 'none',
orientation: 'vertical',
hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}},
vAxis: { textStyle: {fontSize: 13}},
chartArea:{top:10, height:580}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div id="chart_div" style="width: 1200px; height: 620px;"></div>
</div>
</div>
</body>
</html>我想在每个相关的烛台图上添加基础数据（带红点的散点图）。以便用户能够更好地可视化数据的传播，并最终识别异常值。
下面是前三个烛台图的基础数据。[69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225]
[71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187]
[78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
谢谢你的帮助。
- 特拉维斯
共有1个答案
这是我想到的。。。
为每个分散点向数据表中添加一个新列。。。
var scatterSeries = [
[69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225],
[71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187],
[78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
];
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (scatterSeries.length > i) {
scatterSeries[i].forEach(function (y, index) {
var colIndex = data.addColumn('number', 'Scatter ' + index);
data.setValue(i, colIndex, y);
addSeries(data.getNumberOfColumns() - 5);
});
}
}
为每个新列添加一个系列选项。。。
function addSeries(index) {
options.series[index] = {type: 'scatter', pointSize: 1};
}
默认情况下，图表将为每个系列添加不同的颜色，
要对所有系列使用相同的颜色，请为每个新系列列添加一个“样式”列
这可以使用数据视图完成。。。
var viewColumns = [];
for (var col = 0; col < data.getNumberOfColumns(); col++) {
viewColumns.push(col);
if (data.getColumnLabel(col).indexOf('Scatter') > -1) {
viewColumns.push({
type: 'string',
role: 'style',
calc: function (dt, row) {
return 'red';
}
});
}
}
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
请参阅以下工作段。。。
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['American Bullfrog (394)', 69, 137, 176, 225],
['American Toad (479)', 71, 99, 146, 187],
['Blanchards Cricket Frog (1476)', 78, 121, 168, 210],
['Boreal Chorus Frog (2410)', 55, 93, 160, 242],
['Chihuahuan Green Toad (24)', 124, 159, 188, 228],
['Crawfish Frog (212)', 67, 83, 111, 187],
['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201],
['Gray Treefrog complex (721)', 74, 118, 169, 202],
['Great Plains Toad (212)', 85, 130, 174, 242],
['Plains Leopard Frog (638)', 70, 103, 163, 242],
['Plains Spadefoot (165)', 85, 129, 177, 225],
['Red-spotted Toad (9)', 154, 154, 165, 165],
['Southern Leopard Frog (344)', 55, 84, 144, 200],
['Spotted Chorus Frog (163)', 80, 111, 153, 239],
['Spring Peeper (116)', 41, 63, 102, 146],
['Streckers Chorus Frog (100)', 57, 84, 110, 149],
['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211],
['Woodhouses Toad (553)', 83, 125, 173, 243],
], true);
var options = {
legend: 'none',
orientation: 'vertical',
hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}},
vAxis: { textStyle: {fontSize: 13}},
chartArea:{bottom: 24, top: 10, height: '100%'},
series: {}
};
var scatterSeries = [
[69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225],
[71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187],
[78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
];
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (scatterSeries.length > i) {
scatterSeries[i].forEach(function (y, index) {
var colIndex = data.addColumn('number', 'Scatter ' + index);
data.setValue(i, colIndex, y);
addSeries(data.getNumberOfColumns() - 5);
});
}
}
var viewColumns = [];
for (var col = 0; col < data.getNumberOfColumns(); col++) {
viewColumns.push(col);
if (data.getColumnLabel(col).indexOf('Scatter') > -1) {
viewColumns.push({
type: 'string',
role: 'style',
calc: function (dt, row) {
return 'red';
}
});
}
}
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
function addSeries(index) {
options.series[index] = {type: 'scatter', pointSize: 1};
}
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(view, options);
window.addEventListener('resize', function () {
chart.draw(view, options);
}, false);
}html, body {
height: 100%;
}
#chart_div {
height: 100%;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>-
我需要良好的阴阳烛图表为我的网络应用程序和图表http://bitcoinwisdom.com/真的是我在寻找。我喜欢你可以放大和移动的方式。有没有可能弄清楚他们在使用什么，或者你认为他们是自己编的？如果是的话用什么工具？另一个惊人的图表可以在这里找到https://www.tradingview.com/e/这两个网站比一些桌面应用程序有更好的图表，我想知道他们是如何做到的。
-
使用Chart.js2.0。我正在寻找一种在图表底部添加页脚（一行文本）的方法，以便显示数据源。 我尝试通过option对象来解决它，就像title和legend被包括和修改一样。像这样： 我在文档中几次提到了“footer”，以及样式化它或在“工具提示”上下文中使用它的方法，但还没有看到如何具体添加它。 编辑/更新：我找到了两种方法（但没有完美的解决方案）来在图表中添加页脚，同时尝试解决这个问题
-
报告中可以包含多个图表。 启动或关闭状态 包含实例的启动或关闭状态图表。 面积图或折线图 包含实例的图表。 图表 选择要包含在报告中的图表。 【注意】如果选择了多种类型的实例，则可以为每种类型的实例添加相应的面积图或折线图。 图表类型 选择图表的类型：面积图或折线图。 复制图表 包含实例的复制图表。如果要包含复制列表的详细信息，请勾选“包含复制列表”选项。 费时查询分析 包含实例的费时查询图表。
-
图表提供了数据源中数据的直观表示。 添加一个图表 在仪表板选项卡中，点击 “添加图表”。 工作区中所有可用的图表将显示为缩略图。如果没有可用的图表，请点击 “新建图表”以创建一个。有关创建图表的详细说明，请参阅构建图表。 将图表拖到设计窗格中。 属性 图表的可用属性： 选项 描述 位置 自定义图表的位置。 大小 自定义图表的大小。
-
图表提供了数据源中数据的直观表示。 添加一个图表 在仪表板选项卡中，点击 . 工作区中所有可用的图表将显示为缩略图。如果没有可用的图表，请点击 以创建一个。有关创建图表的详细说明，请参阅构建图表。 将图表拖到设计窗格中。 属性 图表的可用属性： 选项 描述 位置 自定义图表的位置。 大小 自定义图表的大小。
-
图表提供了数据源中数据的直观表示。 添加一个图表 在仪表板选项卡中，点击 “添加图表”。 工作区中所有可用的图表将显示为缩略图。如果没有可用的图表，请点击 “新建图表”以创建一个。有关创建图表的详细说明，请参阅构建图表。 将图表拖到设计窗格中。 属性 图表的可用属性： 选项 描述 位置 自定义图表的位置。 大小 自定义图表的大小。