要求：对一个[x, y]序列画一个bar图，把某些特殊数据用特殊颜色显示出来。
方法有多种，比如，画完图，再用js改颜色，结果要写很多代码，而且要考虑各种事件，实现难度大，而且容易招错。
也可以从改造数据结构入手，把[x, y]改成[x, y1, y2]，不同的y对应不同颜色，这种方法值得实现。
下面以google chart为例：
<html>
<head>
</head>
<body>
<div id="chart_div" style="width: 500px;"></div>
https://developers.google.com/chart/interactive/docs/gallery/barchart
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Sales'],
['2004', 1000, null],
['2005', null, 460],
['2006', 660, null],
['2007', 1030, null]
]);
var options = {
title: 'Company Performance',
isStacked: true,
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
series:{1:{visibleInLegend: false}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</html>
我们把数据1改成数据2：
----------数据1==[原始数据]
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2004', 1000],
['2005', 460],
['2006', 660],
['2007', 1030]
]);
----------数据2==[改造后的数据]
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Sales'],
['2004', 1000, null],
['2005', null, 460],
['2006', 660, null],
['2007', 1030, null]
]);
----------------------------------
isStacked: true 可以使bar对齐，好像只显示[x, y]。
series:{1:{visibleInLegend: false}} 可以隐藏y2的legend图标。
----------------------------------
结果如下：
- 大小: 10.5 KB
分享到：
相关推荐
在本文中，我们将深入探讨如何使用MATLAB进行HSV彩色调色板的绘制，特别是矩形和圆形的渐变效果。HSV色彩模型是图像处理和计算机视觉领域常用的表示颜色的方法，它将颜色分解为色调（Hue）、饱和度（Saturation）和...
获取到颜色后，你可以将它们应用于你的UI元素，如TextView、Button、StatusBar等。 ```java TextView textView = findViewById(R.id.textView); textView.setTextColor(vibrantColor); Button button = ...
SeekBar seekBar = findViewById(R.id.seek_bar); seekBar.setMax(255); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar...
甚高频 ... geom_bar(aes( " " , fill = x ), position = " stack " ) + scale_fill_identity() + theme_void() + coord_flip() vhs( " tdk_vivid " , type = " c " , n = 40 ) % > % tibble( x =
独创的增效美图工具扩展无限的调色创作空间，给图片美化带来极大弹性；优秀的智能图像算法实现高效图像预览并支持原图保存，时刻为您呈现完美图像；强大的批量模板处理功能，快速便捷完成大量的修图动作，达到...
bar3d(50, 50, 250, 150, 20, 1); getch(); closegraph(); // 关闭图形环境 return 0; } ``` #### 四、屏幕颜色的设置 在图形模式下，可以使用特定的函数来设置背景色和前景色。 - **函数:** `setbkcolor()...
对数刻度图 二维线条图 三维线条图 y 轴分居左右两侧的线条图 极坐标图 半对数坐标图 在窗口的平铺位置创建坐标轴 绘图工具 figurepalette pan plotbrowser plotedit plottools propertyeditor rotate3d ...
在这个例子中，我们创建了一个包含五种颜色的调色板，并将其应用于Matplotlib的条形图中。通过这种方式，我们可以确保每次使用相同的调色板，保持视觉一致性。 总的来说，`custom_color_palette`库为Python开发者...
7. **数据可视化**：如果BYN.m用于数据可视化，那么可能涉及到scatter、plot、bar等函数，以及如何根据数据动态调整调色板。 8. **文件输入输出**：可能使用save、load等函数保存和加载用户自定义的调色板。 9. **...
8. **基本图形函数**：包括画点（`putpixel()`和`getpixel()`）、移动（`moveto()`、`moverel()`、`getx()`和`gety()`）、画线（`line()`、`lineto()`和`linerel()`）、绘制矩形和条形图（`rectangle()`和`bar()`）...
1. **基本绘图函数**：如`plot`用于绘制二维线图，`surf`和`mesh`用于绘制三维曲面，`bar`用于绘制条形图，`histogram`用于绘制直方图等。通过调整这些函数的参数，可以定制线条颜色、样式、标记符号等，实现个性化...
4. **调色板控制**：`getpalette()` 和 `putpalette()` 可以读取和修改调色板。 - 调色板是用于定义屏幕颜色的重要工具。 5. **自定义填充图案**：通过 `setfillpattern()` 可以设置填充图案。 - 例如，可以创建...
2. 创建一个基本的ggplot2图表，指定数据、几何对象（如geom_line或geom_bar）以及任何其他必要的图层。 3. 应用rockthemes中的主题。例如，`theme_rock()`会应用默认的摇滚风格，而`theme_darkside()`则会提供一种...
这个“D3.js-bar-charts”项目是专门针对条形图的实现，它展示了如何利用D3.js来设计和定制各种各样的条形图表。 在JavaScript的世界里，D3.js以其高度的灵活性和对SVG（可缩放矢量图形）的强大支持而闻名，使得...
1.利用外部加载的一组控件，MS windows common controls 6.0中的三个控件：toolbar, statusbar, imagelist 制作一个有菜单，有工具栏、有状态栏的主界面，并且进而实现从该界面可以任意切换到另外两个窗体。...
在实际应用中，可以结合各种图表类型，如柱状图（`bar`）、饼图（`pie`）等，利用这些自定义配置，创建出富有表现力的数据可视化效果。 总之，ECharts的高级特性使得用户能够深度定制图表的视觉表现，从而更好地...
- `bar3`和`bar3h`：绘制三维条形图。 - `pareto`和`pie`：绘制帕累托图和饼图。 - `pie3`：创建三维饼图。 - `contour`、`contour3`、`contourc`和`contourf`：用于等高线图的绘制，包括二维、三维以及填充的...
3. **bar函数**：创建条形图，`bar(x, y)`可以展示各组数据的大小，常用于比较分类数据。 4. **histogram函数**：用于绘制直方图，`histogram(x, n)`可以统计x数据的频率分布，n是分箱数。 5. **figure和subplot...