C3: рд▓реЙрдЧрд░рд┐рджрдорд┐рдХ рдкреНрд▓реЙрдЯ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 20 рдордИ 2014  ┬╖  16рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: c3js/c3

рд╕рднреА рдХреЛ рдирдорд╕реНрдХрд╛рд░,
рдореИрдВрдиреЗ рдпрд╣рд╛рдВ рдФрд░ рдЙрджрд╛рд╣рд░рдг рдкреГрд╖реНрда рдкрд░ рдереЛрдбрд╝реА рдЦреЛрдЬ рдХреА рд╣реИ, рд▓реЗрдХрд┐рди рд▓реЙрдЧрд░рд┐рджрдо-рд╕реНрдХреЗрд▓ рдХрд┐рдП рдЧрдП рдЕрдХреНрд╖реЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреБрдЫ рднреА рдирд╣реАрдВ рдорд┐рд▓рд╛ рд╣реИред рдХреНрдпрд╛ рдЙрдиреНрд╣реЗрдВ рдмрдирд╛рдирд╛ рд╕рдВрднрд╡ рд╣реИ? рдпрджрд┐ рдирд╣реАрдВ, рддреЛ рдЗрд╕реЗ рдПрдХ рд╕реБрд╡рд┐рдзрд╛ рдЕрдиреБрд░реЛрдз рдХреЗ рд░реВрдк рдореЗрдВ рдорд╛рдиреЗрдВред
рд╕рд╛рджрд░,
рдпрд╛рдХреЛрд╡ред

C-feature-request C-new-chart

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдпрд╣ рдПрдХ рдмрд╣реБрдд рдмрджрд╕реВрд░рдд рд╣реИрдХ рд╣реИред рдХреНрдпрд╛ рдПрдХ рдПрдкреАрдЖрдИ рдХрд╛ рдкрд░реНрджрд╛рдлрд╛рд╢ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реЛрдЧрд╛ рдЬреЛ рдХрд┐рд╕реА рднреА рдбреА 3 рд╕реНрдХреЗрд▓ рдХреЛ рдкреНрд▓рдЧ рдЗрди рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ?

рд╕рднреА 16 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдирдорд╕реНрддреЗ, рдХреНрд╖рдорд╛ рдХрд░реЗрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдирд╣реАрдВред рдЕрдм рдЖрдкрдХреЛ рд▓реЙрдЧрд░рд┐рджрдо-рд╕реНрдХреЗрд▓ рдХрд┐рдП рдЧрдП рдбреЗрдЯрд╛ рдХреЛ рд╕реНрд╡рдпрдВ рдЙрддреНрдкрдиреНрди рдХрд░рдиреЗ рдФрд░ рдкреНрд▓реЙрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред
рдореИрдВ рдмрд╛рдж рдореЗрдВ рдПрдХ рдирдИ рд╕реБрд╡рд┐рдзрд╛ рдХреЗ рд░реВрдк рдореЗрдВ рд╡рд┐рдЪрд╛рд░ рдХрд░реВрдВрдЧрд╛ред

рдирдорд╕реНрддреЗ рдорд╛рд╕рд╛рдпреБрдХреА,

рдЖрдкрдХреЛ рд▓рдШреБрдЧрдгрдХ-рд╕реНрдХреЗрд▓ рдХрд┐рдП рдЧрдП рдбреЗрдЯрд╛ рдЙрддреНрдкрдиреНрди рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ

рдХреНрдпрд╛ рдЖрдкрдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЕрдм рдЗрд╕ рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрдХрд░рдг рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИ? рдореИрдВрдиреЗ #Axis рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЛ рджреЗрдЦрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдордирдорд╛рдиреА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рдЯрд┐рдХ рд▓рдЧрд╛рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рдирд╣реАрдВ рдорд┐рд▓рд╛ рд╣реИ .. рдореБрдЭреЗ рдХрд┐рд╕ рдЙрджрд╛рд╣рд░рдг рдкрд░ рдЧреМрд░ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП?
рдЖрдкрдХреЗ рд╕рдордп рдФрд░ рдЖрдкрдХреЗ рдХрд╛рдо рдХреЗ рд▓рд┐рдП рд╢реБрднрдХрд╛рдордирд╛рдПрдБ рдФрд░ рдзрдиреНрдпрд╡рд╛рдж,
рдпрд╛рдХреЛрд╡ред

рдЬрдм рдЖрдк рдЕрдкрдирд╛ рдбреЗрдЯрд╛ рддреИрдпрд╛рд░ рдХрд░рддреЗ рд╣реИрдВ рддреЛ рдЙрд╕реЗ рд▓реЙрдЧ рд╕реНрдХреЗрд▓ рдореЗрдВ рдмрджрд▓ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдкрд╛рдпрдерди рдореЗрдВ рдорд╛рди рд▓реЗрдВ рдХрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рдЗрд╕ рддрд░рд╣ рдХреА рдПрдХ рд╕реВрдЪреА рд╣реИ

[100,1000,10000]

рдЖрдк рдмрд╕ рдпрд╣ рдХрд░реЗрдВ

import math
log_list = map(math.log10,[100,1000,10000])

рдорд╛рд╕рд╛рдпреБрдХреА рдХреЗ рд╕рдорд╛рдзрд╛рди рдХрд╛ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди:

data_test_original = ['data1', 10, 100, 1000, 3, 500, 50, 5, 3000]
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
    data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
}

var chart_test = c3.generate({
    bindto: '#chart_test',
    size: {
        height: 240,
        width: 480
    },
    data: {
      columns: [
        data_test
      ]
    },
    axis : {
        y : {
            tick: {
               format: function (d) { return Math.pow(10,d).toFixed(2); }
            }
        }
    },
});

рд╣реИ @pbustosl ,, рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ! thx ... рд▓реЗрдХрд┐рди рдЬрдм рдореЗрд░реЗ рдкрд╛рд╕ рдбреЗрдЯрд╛ 1 рдореЗрдВ рдорд╛рди 0 рд╣реИ, рддреЛ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ, рдореИрдВ рдорд╛рди 0 рдХреЛ рдХреИрд╕реЗ рд╕рдВрднрд╛рд▓ рд╕рдХрддрд╛ рд╣реВрдВ? рдзрдиреНрдпрд╡рд╛рдж

рдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рднреА рдорд╛рдиреЛрдВ рдХреЛ рдкреНрд░рд╛рд░реВрдкрд┐рдд рдХрд░реЗрдВрдЧреЗ:

data_test_original = ['data1', 10, 100, 1000, 3, 500, 50, 5, 3000]
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
    data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
}

var chart_test = c3.generate({
    size: {
        height: 240,
        width: 480
    },
    data: {
        type:"bar",
      columns: [
        data_test
      ],
      labels : {show:true,
          format: {
              data1 : function(d,id){console.log(id, Math.pow(10,d));return Math.pow(10,d).toFixed(0);}
          }
      }
    },
    axis : {
        y : {
            show:false,
            tick: {
               format: function (d) { return Math.pow(10,d).toFixed(0); }
            }
        }
    },
});

рдпрд╣ рдПрдХ рдмрд╣реБрдд рдмрджрд╕реВрд░рдд рд╣реИрдХ рд╣реИред рдХреНрдпрд╛ рдПрдХ рдПрдкреАрдЖрдИ рдХрд╛ рдкрд░реНрджрд╛рдлрд╛рд╢ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реЛрдЧрд╛ рдЬреЛ рдХрд┐рд╕реА рднреА рдбреА 3 рд╕реНрдХреЗрд▓ рдХреЛ рдкреНрд▓рдЧ рдЗрди рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ?

+1 ...рдореБрдЭреЗ рд▓реЙрдЧ рд╕реНрдХреЗрд▓ рдореЗрдВ рдПрдХ рдЪрд╛рд░реНрдЯ рдмрдирд╛рдирд╛ рд╣реИред

рдореИрдВ рд▓реЙрдЧ рджреНрд╡рд╛рд░рд╛ рдЕрдкрдиреА y рдЕрдХреНрд╖ (рддреЛрдВ) рдХреЛ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рднреА рдЪрд╛рд╣реВрдВрдЧрд╛

рдореИрдВ рднреА рд╡рд╛рдИ рдЕрдХреНрд╖ рдХреЗ рд▓рд┐рдП рд▓реЙрдЧ рд╕реНрдХреЗрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред

рдЗрд╕ рдкрд░ рдХреЛрдИ рднреА рд╕рдорд╛рдЪрд╛рд░?

рдЗрд╕ рдореБрджреНрджреЗ рд╕реЗ рдирд┐рдкрдЯрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА (#2100)ред рдпрд╣ 100% рд╕рд╣реА рдирд╣реАрдВ рд╣реИ рд▓реЗрдХрд┐рди рдХрдИ рдорд╛рдорд▓реЛрдВ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдореИрдВрдиреЗ @pbustosl рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреА рдХреЛрд╢рд┐рд╢ рдХреА ... рдпрд╣ рдорджрджрдЧрд╛рд░ рдерд╛ред

рд▓реЗрдХрд┐рди рдЬрдм рдбреЗрдЯрд╛ рдорд╛рди 1 рд╣реИ, рддреЛ y рдЕрдХреНрд╖ 1 рд╕реЗ рд╢реБрд░реВ рд╣реЛ рд░рд╣рд╛ рдерд╛ред рд╡рд╣ рднреА рдЬрдм рдбреЗрдЯрд╛ рдорд╛рди 0 рдерд╛ рдЪрд╛рд░реНрдЯ рдкреНрд░рддрд┐рдкрд╛рджрди рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рдерд╛ред

рдореИрдВрдиреЗ рдЗрд╕рдХреЗ рд▓рд┐рдП рдХреБрдЫ рдЙрдкрд╛рдп рдХрд┐рдП рд╣реИрдВред
рдХреГрдкрдпрд╛ рдЗрд╕ JSFiddle рдХреЛ рджреЗрдЦреЗрдВ https://jsfiddle.net/86chryat/

d3.js рд╕реАрдзреЗ рдЕрдХреНрд╖ рдкрд░ рд▓реЙрдЧ рд╕реНрдХреЗрд▓ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ рдпрджрд┐ рдЗрд╕реЗ c3 рдореЗрдВ рджрд┐рдЦрд╛рдпрд╛ рдЬрд╛ рд╕рдХреЗред рдпрд╣ рдбреЗрдЯрд╛ рдХреА рдкреБрдирд░реНрдЧрдгрдирд╛ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдЯрд┐рдХреНрд╕ рдХреЛ рднреА рд╕рдВрднрд╛рд▓рддрд╛ рд╣реИред

рдореИрдВ рд╕рд╣рдордд рд╣реВрдВ рдХрд┐ рд▓реЙрдЧ рд╕реНрдХреЗрд▓ рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛

@ masayuki0812 - рдЗрд╕реЗ рдмрдВрдж рдХрд░рдиреЗ рд╕реЗ, рдХреНрдпрд╛ рдЗрд╕рдХрд╛ рдорддрд▓рдм рдпрд╣ рд╣реИ рдХрд┐ рдЖрдк рдЗрд╕рдХреЗ рд╕рдорд░реНрдерди рдкрд░ рд╡рд┐рдЪрд╛рд░ рдирд╣реАрдВ рдХрд░реЗрдВрдЧреЗ? рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреБрдЫ рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╡рд┐рд╢реЗрд╖рддрд╛ рд╣реИред рдпрджрд┐ рдЖрдкрдХреЗ рдкрд╛рд╕ рд╕рдордп / рдЭреБрдХрд╛рд╡ рд╣реЛ рддреЛ рдЙрдЪрд┐рдд рдПрдХреАрдХрд░рдг рд╣реЛрдирд╛ рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

MarcusJT picture MarcusJT  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

zachallia picture zachallia  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

alantygel picture alantygel  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Saikat-Sinha picture Saikat-Sinha  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

jstone-ponderosa picture jstone-ponderosa  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ