本文目录一览：
- 1、js代码怎么比较柱状的数值的大小赋予柱状不同颜色
- 2、echarts.js 一个页面如何加载多个表 我想加载两个饼图 为什么只出来一个 求大神解救
- 3、使用Chart.js绘图 怎么才能把图例给显示出来
- 4、echarts如何获取legend data传给series的name？
- 5、JavaScript echarts 问题 请教大家 看不太懂这句话什么意思
- 6、Extjs 4.2 chart中如何自定义legend 图列
js代码怎么比较柱状的数值的大小赋予柱状不同颜色
你好！
为不同数据的柱状图赋值对应的颜色，只需要设置series-data中每个元素的color属性即可。
//定义一个颜色数组
var COLORS = ['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba'];
//根据数值返回对应的颜色值
var getColorByData = function(v) {
return v 80 ? COLORS[0]
: v 83 ? COLORS[1]
: v 86 ? COLORS[2]
: v 87 ? COLORS[3]
: v 88 ? COLORS[4]
: v 89 ? COLORS[5]
: COLORS[6];
}
//对图表数据进行color属性赋值,用于显示
var genData = function(data) {
if(data data.length0) {
for(var i=0;idata.length;i++){
data[i].color = getColorByData(data[i].y);
}
}
return data;
}
//图表数据
var _data = [
{
name: "下车体1#",
y: 88,
},
{
name: "下车体2#",
y: 89,
},
{
name: "下车体3#",
y: 82,
},
{
name: "下车体4#",
y: 85,
},
];
Highcharts.chart('gongzhuangjiancha', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
max: 100,
min:50,
title: {
text: null
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: 'span style="font-size:11px"/spanbr',
pointFormat: 'span style="color:{green}"{point.name}/span: b符合率为{point.y:.2f}%/bbr/'
},
series: [
{
name: "Browsers",
colorByPoint:false ,
data: genData(_data)
}
],
});
代码比较简单，看下注释很好理解。
希望对你有帮助！
echarts.js 一个页面如何加载多个表 我想加载两个饼图 为什么只出来一个 求大神解救
body
input type="button" value="TestEcharts" onclick="showLine()" /br /
input type="button" value="RadarEcharts" onclick="showRadar()" /
div id="stackbar" align="center"
style="height: 260px; width: 30%; line-height: 260px; border: 1px solid blue; padding-left: -80px;"[可视化数据图例1...]/div
div id="radarbar" align="center"
style="height: 260px; width: 30%; line-height: 260px; border: 1px solid green; margin-top: 10px;"[可视化数据图例2...]/div
分开初始化，.init(div);
function showLine() {
var echartBar = echarts.init(document.getElementById("stackbar"));
var option1 = {
title:{
text:'test',
subtext:'折线图测试',
x:'center',
y:'top',
textAlign:'center'
},
legend:{
data:['ThisWeek', 'LastWeek', 'FutureWeek'],
x: 'center',
y: 'bottom'
},
tooltip:{
//show: true, 默认添加tip即显示
trigger: 'item',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
textStyle:{
fontSize: 8
}
}
},
yAxis: {
type: 'value',
axisLabel:{
textStyle:{
fontSize: 5
}
}
},
series: [{
name: 'ThisWeek',
type: 'line',
//xAxisIndex: 1,
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: 'LastWeek',
type: 'line',
data: [920, 832, 801, 834, 1090, 1130, 1120]
},
{
name: 'FutureWeek',
type: 'bar',
data: [520, 432, 401, 434, 690, 730, 720]
}
]
};
echartBar.hideLoading();
echartBar.setOption(option1);
}
也可以写在一个js函数中，如：
var echartBar = echarts.init(document.getElementById("stackbar"));
echartBar.showLoading();
var echartPie = echarts.init(document.getElementById("pie"));
echartPie.showLoading();
$.ajax({
url: "getFVIData.do",
type: 'GET',
cache: false,
dataType: 'json',
success: function (data) {
var option1 = { ......
使用Chart.js绘图 怎么才能把图例给显示出来
C# code? var myChart = new Chart(ctx).Pie(data, options) var legend = myChart.generateLegend(); legend 里就是模板生成的HTML代码，可以设置为某个元素的innerHTML然后就显示出来了
echarts如何获取legend data传给series的name？
首先，在Java Web项目中新建一个JSP页面someChart.jsp，引入echarts核心JS
script type="text/javascript" src="%=basePath%/scripts/echarts/build/dist/echarts.js"/script
script type="text/javascript"
// 路径配置
require.config({
paths: {
echarts: "%=basePath%/scripts/echarts/build/dist"
}
});
/script
由于这里要用到折线图，需要将折线图的JS引入
require(
[
'echarts',
'echarts/chart/line'
],
图形要在页面上显示，需要一个容器，这里在body里定义一个div
body
div id="lineChart" style="width: 100%;height:100%;font-family: 微软雅黑;font-size: 12px;"/div
/body
现在，编写形成折线图的核心js
function (ec) {
var line = ec.init(document.getElementById('lineChart'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"苹果销售量",
"type":"line",
"data":[8956, 2025, 3640, 5610, 8910, 5720, 3467, 9023, 8367, 5342, 6754, 8753]
}
]
};
line.setOption(option);
}
启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图
点击折线上的折点，会获取到X轴和Y轴值，说明这个需要给图一个点击事件，具体代码如下：
function queryXY(param)
{
var seriesIndex = param.seriesIndex;
var dataIndex = param.dataIndex;
var seriesName = param.seriesName;
var name = param.name;
var data = param.data;
var value = param.value;
console.dir(param);
}
由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，
在函数中添加alert，将参数指标打印在页面上
var str = "seriesIndex:"+seriesIndex+"****"+"dataIndex:"+dataIndex+"****"+"seriesName:"+seriesName+"****"+
"name:"+name+"****"+"data:"+data+"****"+"value:"+value;
alert(str);
再次刷新浏览器，等折线出来后，点击上面的点
JavaScript echarts 问题 请教大家 看不太懂这句话什么意思
你逗我 全都是自己设定的变量 你连这段代码是echart哪里的都不说清？
我只能告诉你 方法内第二句和第三句是初始化用的
下面这段是官方文档里的配置例子
!DOCTYPE html
html
head
meta charset="utf-8"
titleECharts/title
!-- 引入 echarts.js --
script src="echarts.min.js"/script
/head
body
!-- 为ECharts准备一个具备大小（宽高）的Dom --
div id="main" style="width: 600px;height:400px;"/div
script type="text/javascript"
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
/script
/body
/html
建议：既然要用人家的api那么最好好好研究下人家的官方文档及配置信息
Extjs 4.2 chart中如何自定义legend 图列
重写下面这个方法:
Ext.chart.LegendItem.prototype.getLabelText = function() {
var me = this, series = me.series, idx = me.yFieldIndex;
function getSeriesProp(name) {
var val = series[name];
return (Ext.isArray(val) ? val[idx] : val);
}
return getSeriesProp('dispalyField') || getSeriesProp('yField');
};
然后在series配置中添加如下
yField : ['dataSum', 'dataSuccSum', 'dataFailSum'],
dispalyField : ['总数',
'成功',
'失败']
yField 是原生属性,dispalyField 是扩展属性.里面配置你想要显示的数据.注意要和yField 对应
