123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- <html>
- <head>
- <link href="/css/c3.css" rel="stylesheet" type="text/css">
- </head>
- <body>
- grouped => true, multiple => true
- <div id="chart1"></div>
- grouped => true, multiple => true, tooltip.grouped = false
- <div id="chart1-1"></div>
- grouped => true, multiple => false
- <div id="chart2"></div>
- grouped => true, multiple => false, tooltip.grouped = false
- <div id="chart2-1"></div>
- grouped => false, multiple => true
- <div id="chart3"></div>
- grouped => false, multiple => true, tooltip.grouped = false
- <div id="chart3-1"></div>
- grouped => false, multiple => false
- <div id="chart4"></div>
- grouped => false, multiple => false, tooltip.grouped = false
- <div id="chart4-1"></div>
- <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
- <script src="/js/c3.js"></script>
- <script>
- var chart1 = c3.generate({
- bindto: '#chart1',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: true,
- multiple: true,
- },
- onclick: function (d, element) { console.log("onclick", d, element); },
- onselected: function (d, element) { console.log("onselected", d, element); },
- onunselected: function (d, element) { console.log("onunselected", d, element); },
- ondragstart: function () { console.log("ondragstart"); },
- ondragend: function () { console.log("ondragend"); },
- },
- });
- var chart11 = c3.generate({
- bindto: '#chart1-1',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: true,
- multiple: true,
- },
- },
- tooltip: {
- grouped: false
- }
- });
- var chart2 = c3.generate({
- bindto: '#chart2',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: true,
- multiple: false,
- }
- }
- });
- var chart21 = c3.generate({
- bindto: '#chart2-1',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: true,
- multiple: false,
- }
- },
- tooltip: {
- grouped: false
- }
- });
- var chart3 = c3.generate({
- bindto: '#chart3',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: false,
- multiple: true,
- }
- }
- });
- var chart31 = c3.generate({
- bindto: '#chart3-1',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: false,
- multiple: true,
- }
- },
- tooltip: {
- grouped: false
- }
- });
- var chart4 = c3.generate({
- bindto: '#chart4',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: false,
- multiple: false,
- }
- }
- });
- var chart41 = c3.generate({
- bindto: '#chart4-1',
- data: {
- columns: [
- ['data1', 30, 200, 100, 400, 150, 250],
- ['data2', 50, 20, 10, 40, 15, 25]
- ],
- selection: {
- enabled: true,
- grouped: false,
- multiple: false,
- }
- },
- tooltip: {
- grouped: false
- }
- });
- </script>
- </body>
- </html>
|