chart.jslegend的简单介绍

本文目录一览：

• 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 对应