两条垂直线之间的阴影区域 [英] Shading Area Between Two Vertical Lines
本文介绍了两条垂直线之间的阴影区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 Google Charts API，我制作了一个折线图.有什么办法可以在两条垂直线之间进行阴影处理吗?我知道我很可能必须使用组合图，但是谁能制作一个简单的面积图的 jsfiddle 来遮蔽两条垂直线的中间?谢谢！
解决方案
以下是根据输入范围绘制钟形曲线的片段.
绘制垂直线以识别均值和标准差范围.
添加阴影以突出显示 1、2 和 & 内的区域.3 均值的标准偏差.
google.charts.load('43', {回调:函数(){document.getElementById('range-draw').addEventListener('click', loadBellCurve, false);window.addEventListener('resize', loadBellCurve, false);loadBellCurve();},包:['控制'，'核心图']});函数 loadBellCurve() {//构建数据样本var rangeMin = parseInt(document.getElementById('range-min').value);var rangeMax = parseInt(document.getElementById('range-max').value);无功步= 0.05;var dataChart = 新的 google.visualization.DataTable({列: [{标签:'样品'，类型:'字符串'}，{标签:'值'，类型:'数字'}，{标签:'变量'，类型:'数字'}，{标签:'X'，类型:'数字'}，{标签:'Y'，类型:'数字'}]});for (var i = rangeMin; i <= rangeMax; i=i+step) {dataChart.addRow([i.toString(), i, null, null, null]);}//找到样本均值var dataMean = google.visualization.data.group(数据图表，[{column: 0, type: 'string', 修饰符: function () {return '';}}],[{列:1，类型:'数字'，聚合:google.visualization.data.avg}]);var sampleMean = dataMean.getValue(0, 1);//找到样本标准差for (var i = 0; i < dataChart.getNumberOfRows(); i++) {dataChart.setValue(i, 2, Math.pow(dataChart.getValue(i, 1) - sampleMean, 2));}var dataVar = google.visualization.data.group(数据图表，[{column: 0, type: 'string', 修饰符: function () {return '';}}],[{列:2，类型:'数字'，聚合:google.visualization.data.avg}]);var sampleStdDev = Math.sqrt(dataVar.getValue(0, 1));//设置标准偏差范围 1-3var sampleRange = [];sampleRange.push([sampleMean - sampleStdDev，样本平均值 + 样本标准偏差]);sampleRange.push([sampleMean - (sampleStdDev * 2),sampleMean + (sampleStdDev * 2)]);sampleRange.push([sampleMean - (sampleStdDev * 3),sampleMean + (sampleStdDev * 3)]);//设置 X/Y 坐标for (var i = 0; i < dataChart.getNumberOfRows(); i++) {dataChart.setValue(i, 3, dataChart.getValue(i, 1) * sampleStdDev + sampleMean);dataChart.setValue(i, 4, getNormalDistribution(dataChart.getValue(i, 1) * sampleStdDev + sampleMean, sampleMean, sampleStdDev));}//填充标准差区域var stdDevCols = {};stdDevCols['1_SD'] = dataChart.addColumn({label: '1 Std Dev', type: 'number'});stdDevCols['2_SD'] = dataChart.addColumn({label: '2 Std Dev', type: 'number'});stdDevCols['3_SD'] = dataChart.addColumn({label: '3 Std Dev', type: 'number'});for (var i = Math.floor(sampleRange[2][0]); i <= Math.ceil(sampleRange[2][1]); i=i+0.05) {var rowIndex = dataChart.addRow();dataChart.setValue(rowIndex, 3, i);if (((i) >= sampleRange[0][0]) && ((i) 1 SD', sampleRange[0][1]);addVerticalLine('< 2 SD', sampleRange[1][0]);addVerticalLine('> 2 SD', sampleRange[1][1]);//系列选项var 标记区域 = {启用交互性:假，点可见:假，工具提示:错误，类型:'区域'};var 标记线 = {启用交互性:假，线宽:3，点可见:假，工具提示:错误，类型:'线'，可见图例:假};//组合图var chartCombo = new google.visualization.ChartWrapper({图表类型:'组合图表'，containerId: '图表组合',选项: {动画片: {持续时间:1000，缓动:'线性'，启动:真},颜色:['#1565C0'、'#43A047'、'#FFB300'、'#E53935'、'#43A047'、'#FFB300'、'#FFB300'、'#E53935'、'#E53935'],资源管理器:{ 动作:['dragToZoom', 'rightClickToReset'] },h轴:{格式:'#,##0'},高度:340，传奇: {文字样式:{颜色:'#676767'，字体大小:10}},系列: {0:{点形状:{类型:'明星'，边:4，凹痕:0.3},点大小:12，点可见:真实，类型:'分散'},1:标记区域，2:标记区域，3:标记区域，4:标记线，5:标记线，6:标记线，7:标记线，8:标记线},系列类型:'分散'，主题:最大化"，title: '正态分布',标题文本样式:{颜色:'#676767'，粗体:假，字体大小:10},工具提示:{isHtml: 真},v轴:{格式:'#,##0.0000'},宽度:'100%'}});//范围过滤器var controlRangeFilter = new google.visualization.ControlWrapper({controlType: 'ChartRangeFilter',containerId: '图表控制范围',选项: {过滤列索引:0，用户界面:{chartType: '面积图',图表选项:{注释:{高对比度:假，干: {颜色:'透明'，长度:0},文字样式:{颜色:'透明'}},图表区域:{左:0，宽度:'100%'},颜色:['#1565C0'、'#43A047'、'#FFB300'、'#E53935'、'#43A047'、'#FFB300'、'#FFB300'、'#E53935'、'#E53935'],身高:72，宽度:'100%'}}}});//图表数据视图var viewChart = new google.visualization.DataView(dataChart);viewChart.setColumns([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]);//绘制仪表盘var 仪表板 = 新的 google.visualization.Dashboard(document.getElementById('dashboard'));仪表板绑定(控制范围过滤器，图表组合)；仪表板.绘制(视图图表)；函数 getNormalDistribution(x, Mean, StdDev) {return Math.exp(-((x - Mean) * (x - Mean))/(2 * StdDev * StdDev))/(Math.sqrt(2 * Math.PI) * StdDev);}函数 addVerticalLine(colLabel, xVal) {var yCol = dataChart.addColumn({label: colLabel, type: 'number'});var annCol = dataChart.addColumn({role: 'annotation', type: 'string'});var rowIndex = dataChart.addRow();dataChart.setValue(rowIndex, 3, xVal);dataChart.setValue(rowIndex, yCol, getNormalDistribution(xVal, sampleMean, sampleStdDev));dataChart.setValue(rowIndex, annCol, xVal.toFixed(2) + '%');rowIndex = dataChart.addRow();dataChart.setValue(rowIndex, 3, xVal);dataChart.setValue(rowIndex, yCol, 0);}} input {字体系列:Arial；字体大小:10px；}输入[类型=数字] {文本对齐:右；宽度:48px；}标签 {字体系列:Arial；字体大小:10px；字体粗细:粗体；}<script src="https://www.gstatic.com/charts/loader.js"></script><div id="仪表盘"><div><label for="range-min">Min:</label><input type="number" id="range-min" value="-4"/> <label for="range-max">Max:</label><input type="number" id="range-max" value="4"/> <input type="button" id="range-draw" value="绘制图表"/><div id="chart-combo"></div><div id="chart-control-range"></div><div id="图表表"></div>
Using Google Charts API, I have made a line chart. Is there any way to be able to shade between two vertical lines? I know I most likely have to use a combo chart, but can anyone make a simple jsfiddle of an Area Chart that shades the middle of two vertical lines? Thank you!
解决方案
following is a snippet that draws a bell curve based on the input range.
vertical lines are drawn to identify the Mean and Standard Deviation ranges.
shading is added to highlight the areas within 1, 2, & 3 Standard Deviations from the Mean.
google.charts.load('43', {
callback: function () {
document.getElementById('range-draw').addEventListener('click', loadBellCurve, false);
window.addEventListener('resize', loadBellCurve, false);
loadBellCurve();
},
packages:['controls', 'corechart']
});
function loadBellCurve() {
// build data sample
var rangeMin = parseInt(document.getElementById('range-min').value);
var rangeMax = parseInt(document.getElementById('range-max').value);
var step = 0.05;
var dataChart = new google.visualization.DataTable({
cols: [
{label: 'Sample', type: 'string'},
{label: 'Value', type: 'number'},
{label: 'Var', type: 'number'},
{label: 'X', type: 'number'},
{label: 'Y', type: 'number'}
]
});
for (var i = rangeMin; i <= rangeMax; i=i+step) {
dataChart.addRow([i.toString(), i, null, null, null]);
}
// find sample mean
var dataMean = google.visualization.data.group(
dataChart,
[{column: 0, type: 'string', modifier: function () {return '';}}],
[{column: 1, type: 'number', aggregation: google.visualization.data.avg}]
);
var sampleMean = dataMean.getValue(0, 1);
// find sample standard deviation
for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
dataChart.setValue(i, 2, Math.pow(dataChart.getValue(i, 1) - sampleMean, 2));
}
var dataVar = google.visualization.data.group(
dataChart,
[{column: 0, type: 'string', modifier: function () {return '';}}],
[{column: 2, type: 'number', aggregation: google.visualization.data.avg}]
);
var sampleStdDev = Math.sqrt(dataVar.getValue(0, 1));
// set standard deviation ranges 1-3
var sampleRange = [];
sampleRange.push([
sampleMean - sampleStdDev,
sampleMean + sampleStdDev
]);
sampleRange.push([
sampleMean - (sampleStdDev * 2),
sampleMean + (sampleStdDev * 2)
]);
sampleRange.push([
sampleMean - (sampleStdDev * 3),
sampleMean + (sampleStdDev * 3)
]);
// set X/Y coordinates
for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
dataChart.setValue(i, 3, dataChart.getValue(i, 1) * sampleStdDev + sampleMean);
dataChart.setValue(i, 4, getNormalDistribution(dataChart.getValue(i, 1) * sampleStdDev + sampleMean, sampleMean, sampleStdDev));
}
// fill-in standard deviation areas
var stdDevCols = {};
stdDevCols['1_SD'] = dataChart.addColumn({label: '1 Std Dev', type: 'number'});
stdDevCols['2_SD'] = dataChart.addColumn({label: '2 Std Dev', type: 'number'});
stdDevCols['3_SD'] = dataChart.addColumn({label: '3 Std Dev', type: 'number'});
for (var i = Math.floor(sampleRange[2][0]); i <= Math.ceil(sampleRange[2][1]); i=i+0.05) {
var rowIndex = dataChart.addRow();
dataChart.setValue(rowIndex, 3, i);
if (((i) >= sampleRange[0][0]) && ((i) < sampleRange[0][1])) {
dataChart.setValue(rowIndex, stdDevCols['1_SD'], getNormalDistribution(i, sampleMean, sampleStdDev));
} else if (((i) >= sampleRange[1][0]) && ((i) < sampleRange[1][1])) {
dataChart.setValue(rowIndex, stdDevCols['2_SD'], getNormalDistribution(i, sampleMean, sampleStdDev));
} else {
dataChart.setValue(rowIndex, stdDevCols['3_SD'], getNormalDistribution(i, sampleMean, sampleStdDev));
}
}
// add vertical lines for mean and standard deviations
addVerticalLine('MEAN', sampleMean);
addVerticalLine('< 1 SD', sampleRange[0][0]);
addVerticalLine('> 1 SD', sampleRange[0][1]);
addVerticalLine('< 2 SD', sampleRange[1][0]);
addVerticalLine('> 2 SD', sampleRange[1][1]);
// series options
var markersArea = {
enableInteractivity: false,
pointsVisible: false,
tooltip: false,
type: 'area'
};
var markersLine = {
enableInteractivity: false,
lineWidth: 3,
pointsVisible: false,
tooltip: false,
type: 'line',
visibleInLegend: false
};
// combo chart
var chartCombo = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart-combo',
options: {
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
colors: ['#1565C0', '#43A047', '#FFB300', '#E53935', '#43A047', '#FFB300', '#FFB300', '#E53935', '#E53935'],
explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
hAxis: {
format: '#,##0'
},
height: 340,
legend: {
textStyle: {
color: '#676767',
fontSize: 10
}
},
series: {
0: {
pointShape: {
type: 'star',
sides: 4,
dent: 0.3
},
pointSize: 12,
pointsVisible: true,
type: 'scatter'
},
1: markersArea,
2: markersArea,
3: markersArea,
4: markersLine,
5: markersLine,
6: markersLine,
7: markersLine,
8: markersLine
},
seriesType: 'scatter',
theme: 'maximized',
title: 'Normal Distribution',
titleTextStyle: {
color: '#676767',
bold: false,
fontSize: 10
},
tooltip: {
isHtml: true
},
vAxis: {
format: '#,##0.0000'
},
width: '100%'
}
});
// range filter
var controlRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'chart-control-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'AreaChart',
chartOptions: {
annotations: {
highContrast: false,
stem: {
color: 'transparent',
length: 0
},
textStyle: {
color: 'transparent'
}
},
chartArea: {
left: 0,
width: '100%'
},
colors: ['#1565C0', '#43A047', '#FFB300', '#E53935', '#43A047', '#FFB300', '#FFB300', '#E53935', '#E53935'],
height: 72,
width: '100%'
}
}
}
});
// chart data view
var viewChart = new google.visualization.DataView(dataChart);
viewChart.setColumns([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]);
// draw dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(controlRangeFilter, chartCombo);
dashboard.draw(viewChart);
function getNormalDistribution(x, Mean, StdDev) {
return Math.exp(-((x - Mean) * (x - Mean)) / (2 * StdDev * StdDev)) / (Math.sqrt(2 * Math.PI) * StdDev);
}
function addVerticalLine(colLabel, xVal) {
var yCol = dataChart.addColumn({label: colLabel, type: 'number'});
var annCol = dataChart.addColumn({role: 'annotation', type: 'string'});
var rowIndex = dataChart.addRow();
dataChart.setValue(rowIndex, 3, xVal);
dataChart.setValue(rowIndex, yCol, getNormalDistribution(xVal, sampleMean, sampleStdDev));
dataChart.setValue(rowIndex, annCol, xVal.toFixed(2) + ' %');
rowIndex = dataChart.addRow();
dataChart.setValue(rowIndex, 3, xVal);
dataChart.setValue(rowIndex, yCol, 0);
}
}
input {
font-family: Arial;
font-size: 10px;
}
input[type=number] {
text-align: right;
width: 48px;
}
label {
font-family: Arial;
font-size: 10px;
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div>
<label for="range-min">Min:</label> <input type="number" id="range-min" value="-4" />
<label for="range-max">Max:</label> <input type="number" id="range-max" value="4" />
<input type="button" id="range-draw" value="Draw Chart" />
</div>
<div id="chart-combo"></div>
<div id="chart-control-range"></div>
<div id="chart-table"></div>
</div>
这篇关于两条垂直线之间的阴影区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
