10 examples of 'canvasjschart' in JavaScript

14
function createChart(canvas, type, options, data) {
15
    return new Chart(canvas, {
16
        type: type,
17
        options: deepClone(options),
18
        data: deepClone(data)
19
    });
20
}

235
function createChart()
236
        {
237
            //Get the context of the canvas element we want to select
238
            var ctx = document.getElementById("brewChart").getContext("2d");
239
 
240
            //Create the data object to pass to the chart
241
            var data = {
242
                labels : ["Empâtage","60 min","Mash Out","10 min"],
243
                datasets : [
244
							{
245
								fillColor : "rgba(220,220,220,0.5)",
246
								strokeColor : "rgba(220,220,220,1)",
247
								pointColor : "rgba(220,220,220,1)",
248
								pointStrokeColor : "#fff",
249
								data : [67,67,75,75]
250
							},
251
						]
252
                      };
253
 
254
            //The options we are going to pass to the chart
255
            options = {
256
							bezierCurve : false,
257
							scaleOverride : true,
258
							//Number - The number of steps in a hard coded scale
259
							scaleSteps : 12,
260
							//Number - The value jump in the hard coded scale
261
							scaleStepWidth : 1,
262
							//Number - The scale starting value
263
							scaleStartValue : 65,
264
							
265
            };
266
 
267
            //Create the chart
268
            new Chart(ctx).Line(data, options);
269
        }

5
function initChart(canvas, width, height) {
6
  const chart = echarts.init(canvas, null, {
7
    width: width,
8
    height: height
9
  });
10
  canvas.setChart(chart);
11
12
  var option = {
13
    backgroundColor: "#ffffff",
14
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
15
    series: [{
16
      label: {
17
        normal: {
18
          fontSize: 14
19
        }
20
      },
21
      type: 'pie',
22
      center: ['50%', '50%'],
23
      radius: [0, '60%'],
24
      data: [{
25
        value: 55,
26
        name: '北京'
27
      }, {
28
        value: 20,
29
        name: '武汉'
30
      }, {
31
        value: 10,
32
        name: '杭州'
33
      }, {
34
        value: 20,
35
        name: '广州'
36
      }, {
37
        value: 38,
38
        name: '上海'
39
      },
40
      ],
41
      itemStyle: {
42
        emphasis: {
43
          shadowBlur: 10,
44
          shadowOffsetX: 0,
45
          shadowColor: 'rgba(0, 2, 2, 0.3)'
46
        }
47
      }
48
    }]
49
  };
50
51
  chart.setOption(option);
52
  return chart;
53
}

3
function initChart(canvas, width, height, F2) {
4
  const data = [
5
    { year: '2001', population: 41.8 },
6
    { year: '2002', population: 25.8 },
7
    { year: '2003', population: 31.7 },
8
    { year: '2004', population: 46 },
9
    { year: '2005', population: 28 }
10
  ];
11
12
  chart = new F2.Chart({
13
    el: canvas,
14
    width,
15
    height
16
  });
17
  chart.source(data);
18
  chart.coord('polar');
19
  chart.legend({
20
    position: 'right'
21
  });
22
  chart.axis(false);
23
  chart.interval().position('year*population')
24
    .color('year')
25
    .style({
26
      lineWidth: 1,
27
      stroke: '#fff'
28
    });
29
  chart.render();
30
  return chart;
31
}

6
function drawChart(canvas, width, height) {
7
  var Global = F2.Global;
8
  var data = [
9
    { country: '巴西', population: 18203 },
10
    { country: '印尼', population: 23489 },
11
    { country: '美国', population: 29034 },
12
    { country: '印度', population: 104970 },
13
    { country: '中国', population: 131744 }
14
  ];
15
  var chart = new F2.Chart({
16
    el: canvas,
17
    width,
18
    height
19
  });
20
21
  chart.source(data, {
22
    population: {
23
      tickCount: 5
24
    }
25
  });
26
  chart.coord({
27
    transposed: true
28
  });
29
  chart.axis('country', {
30
    line: Global._defaultAxis.line,
31
    grid: null
32
  });
33
  chart.axis('population', {
34
    line: null,
35
    grid: Global._defaultAxis.grid,
36
    label: function(text, index, total) {
37
      var textCfg = {};
38
      if (index === 0) {
39
        textCfg.textAlign = 'left';
40
      } else if (index === total - 1) {
41
        textCfg.textAlign = 'right';
42
      }
43
      return textCfg;
44
    }
45
  });
46
  chart.interval().position('country*population');
47
  chart.render();
48
  return chart;
49
}

2
function generateChart(args) {
3
4
  args = args || {};
5
  args.data = args.data || [];
6
  args.label = args.label || "";
7
  args.title = args.title || "";
8
9
  var colors = {
10
    "blue":   "rgb(54, 162, 235)",
11
    "red":    "rgb(255, 99, 132)",
12
    "green":  "rgb(75, 192, 192)",
13
    "grey":   "rgb(201, 203, 207)",
14
    "orange": "rgb(255, 159, 64)",
15
    "purple": "rgb(153, 102, 255)",
16
    "yellow": "rgb(255, 205, 86)"
17
  }
18
  var colorNames = Object.keys(colors);
19
20
  var barChartData = {
21
    // labels: ["January", "February", "March", "April", "May", "June", "July"],
22
    datasets: [{
23
      label: args.label,
24
      backgroundColor: colors['red'],
25
      borderColor: colors['red'],
26
      borderWidth: 1,
27
      data: args.data
28
    }]
29
  }
30
31
  var ctx = document.getElementById("canvas").getContext("2d");
32
  var chart = new Chart(ctx, {
33
    type: 'bar',
34
    data: barChartData,
35
    options: {
36
      responsive: true,
37
      legend: {
38
        position: 'top',
39
      },
40
      title: {
41
        display: true,
42
        text: args.title
43
      }
44
    }
45
  });
46
47
  return chart;
48
49
}

6
function drawChart(canvas, width, height) {
7
  var data = [
8
    { year: '1951 年', sales: 38 },
9
    { year: '1952 年', sales: 52 },
10
    { year: '1956 年', sales: 61 },
11
    { year: '1957 年', sales: 145 },
12
    { year: '1958 年', sales: 48 },
13
    { year: '1959 年', sales: 38 },
14
    { year: '1960 年', sales: 38 },
15
    { year: '1962 年', sales: 38 },
16
  ];
17
  var chart = new F2.Chart({
18
    el: canvas,
19
    width,
20
    height
21
  });
22
23
  chart.source(data, {
24
    sales: {
25
      tickCount: 5
26
    }
27
  });
28
  chart.tooltip({
29
    showItemMarker: false,
30
    onShow: function(ev) {
31
      var items = ev.items;
32
      items[0].name = null;
33
      items[0].name = items[0].title;
34
      items[0].value = '¥ ' + items[0].value;
35
    }
36
  });
37
  chart.interval().position('year*sales');
38
  chart.render();
39
}

45
function drawChart(canvas, width, height) {
46
    const data = [
47
        {value: 63.4, city: 'New York', date: '2011-10-01'},
48
        {value: 62.7, city: 'Alaska', date: '2011-10-01'},
49
        {value: 72.2, city: 'Austin', date: '2011-10-01'},
50
        {value: 58, city: 'New York', date: '2011-10-02'},
51
        {value: 59.9, city: 'Alaska', date: '2011-10-02'},
52
        {value: 67.7, city: 'Austin', date: '2011-10-02'},
53
        {value: 53.3, city: 'New York', date: '2011-10-03'},
54
        {value: 59.1, city: 'Alaska', date: '2011-10-03'},
55
        {value: 69.4, city: 'Austin', date: '2011-10-03'},
56
        // ...
57
    ];
58
    chart = new F2.Chart({
59
        el: canvas,
60
        width,
61
        height
62
    });
63
64
    chart.source(data, {
65
        date: {
66
            range: [0, 1],
67
            type: 'timeCat',
68
            mask: 'MM-DD'
69
        },
70
        value: {
71
            max: 300,
72
            tickCount: 4
73
        }
74
    });
75
    chart.axis('date', {
76
        label(text, index, total) {
77
            const textCfg = {};
78
            if (index === 0) {
79
                textCfg.textAlign = 'left';
80
            }
81
            if (index === total - 1) {
82
                textCfg.textAlign = 'right';
83
            }
84
            return textCfg;
85
        }
86
    });
87
    chart.area().position('date*value').color('city').adjust('stack');
88
    chart.line().position('date*value').color('city').adjust('stack');
89
    chart.render();
90
    return chart;
91
}

6
function drawChart(canvas, width, height) {
7
  const data = [
8
    { year: '1951 年', sales: 38 },
9
    { year: '1952 年', sales: 52 },
10
    { year: '1956 年', sales: 61 },
11
    { year: '1957 年', sales: 145 },
12
    { year: '1958 年', sales: 48 },
13
    { year: '1959 年', sales: 38 },
14
    { year: '1960 年', sales: 38 },
15
    { year: '1962 年', sales: 38 },
16
  ];
17
  chart = new F2.Chart({
18
    el: canvas,
19
    width,
20
    height
21
  });
22
23
  chart.source(data, {
24
    sales: {
25
      tickCount: 5
26
    }
27
  });
28
  chart.tooltip({
29
    showItemMarker: false,
30
    onShow(ev) {
31
      const { items } = ev;
32
      items[0].name = null;
33
      items[0].name = items[0].title;
34
      items[0].value = '¥ ' + items[0].value;
35
    }
36
  });
37
  chart.interval().position('year*sales');
38
  chart.render();
39
40
  return chart;
41
}

211
function drawChart(labels, data) {
212
    var ctx = document.getElementById('statusChart').getContext('2d');
213
    var myChart = new Chart(ctx, {
214
        type: 'bar',
215
        data: {
216
            labels: labels,
217
            datasets: [{
218
                label: '# of Containers',
219
                data: data,
220
                backgroundColor: [
221
                    'rgba(120,164,107, .2)',
222
                    'rgba(199, 192, 40, .2)',
223
                    'rgba(255, 0, 0, .2)',
224
                    'rgba(255, 0, 0, .2)',
225
                ],
226
                borderColor: [
227
                    'rgba(120,164,107, 1)',
228
                    'rgba(199, 192, 40, 1)',
229
                    'rgba(255, 0, 0, 1)',
230
                    'rgba(255, 0, 0, 1)',
231
                ],
232
                borderWidth: 1
233
            }]
234
        },
235
        options: {
236
            scales: {
237
                yAxes: [{
238
                    ticks: {
239
                        beginAtZero: true
240
                    }
241
                }]
242
            }
243
        }
244
    });
245
}