个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在我的项目中使用谷歌折线图并面临一个问题，我需要更改某些部分的颜色以可视化目标状态随时间的变化。它应该是这样的: 
我已经搜索了很长时间，但找不到使用谷歌图表的方法。我的解决方法是在图表中添加另一个系列，并根据状态交替将第二行 eq 的值设置为第一行，但这看起来很乏味。 
有没有正确的方法来做到这一点？这是我的变通解决方案的示例:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>最佳答案
看完这个答案后How to change color for negative values ，我试过了，这对我有用。答案是使用 DataView API 来操作数据。
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>关于javascript - 带有谷歌可视化的多色折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50034765/
25
4
0
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。
目录 内置的高亮节点 自定义高亮 自定义高亮时保持原始颜色 总结 案例完整代码 通过官方文档，可知高
目录 32.go.Palette 一排放两个 33.go.Palette 基本用法 34.创建自己指向自己的连线 35.设置不同的 groupTemplate 和
目录 41.监听连线拖拽结束后的事件 42.监听画布的修改事件 43.监听节点被 del 删除后回调事件(用于实现调用接口做一些真实的删除操作) 44.监听节点鼠标
织梦初秋 那是一个宜人的初秋午后，阳光透过窗户洒在书桌上，我轻轻地拂去被阳光映照出的尘屑，伸了个懒腰。哎呀，这个世界真是奇妙啊，想到什么就能用代码实现，就像笔尖上点燃的火花。 思索的起点 我一直对天气
曲径通幽，古木参天 时光匆匆，不经意间已是2023年的秋季。我身处在这个充满朝气和变革的时代，每天都充满了新的科技突破和创新。而当我想起曾经努力学习的Python编程语言时，心中涌动着一股热情，渴望将
我有一个堆积条形图，由一个 bool 字段分割。这会导致图例显示为两种颜色(很酷!)但图例具有以下值:true 和 false。对于读者来说，什么是真或假意味着什么是没有上下文的。 在这种情况下，字段
我想在 R 中做一个简单的一阶马尔可夫链。我知道有像 MCMC 这样的包，但找不到一个以图形方式显示它的包。这甚至可能吗？如果给定一个转换矩阵和一个初始状态，那将会很好，人们可以直观地看到通过马尔可夫
我是 tableau 的新手，我有以下可视化，这是链接: My visualization 我的问题是我不知道如何在一个仪表板中添加多个仪表板作为选项卡。在我的可视化中，有三个仪表板“Nota tot
我建立类似自动VJ程序的东西。我有2个网络摄像头发出的2个incomig视频信号和一些可视化效果(目前2个，但我想要更多)。我有一个以dB为单位的传入音频信号音量，以bpm为单位。我需要的是视频输出的
我需要可视化的东西，并想要求一些提示和教程。或者使用哪种技术(Cocos2D、OpenGL、Quartz，...) 这里有人在 iOS 设备上做过可视化吗？ 它是关于移动物体、褪色、粒子等等…… 任何
我对 Graphviz 越来越熟悉，想知道是否可以生成如下所示的图表/图表(不确定你叫它什么)。如果没有，有人知道什么是好的开源框架吗？ (首选，C++，Java 或 Python)。 最佳答案 根据
问题很简单——我真的很喜欢用 UIStackView 来组织 UI。但是，我在测试应用程序中看不到 UIStackView 边界。当 UI 元素不是预期的时候，我需要花很多时间来调试。在网上搜索，我找
例如，我可以通过以下方式分配内存时的情况: Position* arr1 = new Position[5]; Position 是我程序中的一个类，它描述了具有 x 和 y 值的位置点。 堆栈上会有
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 5 年前。
我最近一直在处理许多半复杂的 XSD，我想知道:有哪些更好的工具可以处理 XML 模式？有没有图形工具？ 独立的或基于 Eclipse 的是理想的选择，因为我们不是 .net 商店。 最佳答案 我找到
通过一段时间的使用和学习，对G6有了更一步的经验，这篇博文主要从以下几个小功能着手介绍，文章最后会给出完整的demo代码。 目录 1. 树图的基本布局和
三维数据的获取方式 RGBD相机和深度图 代码展示：在pcl中，把点云转为深度图，并保存和可视化 三维数据的获取方式 在计算机视觉和遥感领域，点云可以通过四种主要的技术获得， （1）根据图像衍生而得，
代码 library(igraph) g <- graph.tree(n = 2 ^ 3 - 1, children = 2) node_labels <- c("", "Group A", "Gro
我正在关注 this tutorial并创建了一个这样的图表: from dask.threaded import get from operator import add dsk = { 'x
我是一名优秀的程序员,十分优秀！