bar图调色

最新推荐文章于 2022-07-28 17:12:55 发布

bg090721

最新推荐文章于 2022-07-28 17:12:55 发布

阅读量213

点赞数

分类专栏： js 文章标签： js ViewUI

本文链接：https://blog.csdn.net/bg090721/article/details/84266941

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要求：对一个[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图标。

----------------------------------

结果如下：

barchart

bg090721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bar图调色

要求：对一个[x, y]序列画一个bar图，把某些特殊数据用特殊颜色显示出来。方法有多种，比如，画完图，再用js改颜色，结果要写很多代码，而且要考虑各种事件，实现难度大，而且容易招错。也可以从改造数据结构入手，把[x, y]改成[x, y1, y2]，不同的y对应不同颜色，这种方法值得实现。下面以google chart为例：&lt;html&gt; &lt;head&...
复制链接

扫一扫

专栏目录