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 對應