Как сделать таблицы многократного использования/шаблонов в c3js

Я пытаюсь использовать C3.js (c3js.org) для создания диаграмм, но я хочу указать все, кроме данных (и любых других незначительных отклонений, уникальных для этой диаграммы), то повторно используйте это для всех диаграмм этого варианта (конкретная конфигурация диаграммы).Как сделать таблицы многократного использования/шаблонов в c3js

Вся документация и все примеры, которые я нашел для C3.js, касаются только того, как вы делаете единый график. Применение этого к множеству диаграмм означает много повторяющегося кода и не обеспечивает согласованности при внесении изменений.

Единственное, что связано с этим, которое я нашел, это concept on making reusable charts в D3.js (d3js.org), лежащей в основе библиотеки, используемой C3.js, и implementation, вдохновленной этой концепцией. Это не очень помогает мне, потому что я хочу, чтобы абстракция более высокого уровня была доступна C3.js, но это может дать вам представление о том, что я ищу.

Я не нашел информации об этом, но одна идея состоит в том, чтобы создать тип диаграммы, основанный на существующем типе, но также включающий дополнительную конфигурацию (например, создать новый тип диаграммы, называемый «горизонтальным баром» на основе существующих тип диаграммы «бар»).

Вот диаграмма, которую я сделал, bindto и columns являются уникальными частями этой диаграммы, остальное должно быть частью шаблона, но я не знаю как.

var chart = c3.generate({ 
 
bindto: '#chart', 
 
data: { 
 
    columns: [ 
 
     ['data1', 125.2], 
 
     ['data2', 282.7], 
 
     ['data3', 3211.1], 
 
     ['data4', 212.2], 
 
     ['data5', 131.1], 
 
     ['data6', 329.7] 
 
    ], 
 
    type: 'pie', 
 
    order: null 
 
}, 
 
pie: { 
 
    label: { 
 
     format: function (value, ratio, id) { 
 
      return d3.format('.1f')(ratio*100)+'%'; //percent with one decimal 
 
     } 
 
    } 
 
}, 
 
tooltip: { 
 
    format: { 
 
     value: function (value, ratio, id, index) { 
 
      return value+'mkr ('+d3.format('.1f')(ratio*100)+'%)'; //example: 155.2mkr (3.3%) 
 
     } 
 
    } 
 
}, 
 
legend: { 
 
    item: { 
 
     onclick: function() {} //disable clicking to hide/show parts of the chart 
 
    } 
 
} 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script> 
 
<div id="chart"></div>

источник

2015-02-12 TomMRiddle

Почему вы не можете сохранить диаграмму в качестве шаблона. Вот что я сделал. Если я хочу, чтобы он был подобен шаблону, я скопировал диаграмму в новую папку, давал ей новое имя, вставлял новые данные, и все. CSS, все уже сделано. – JasTonAChair

У меня есть это в моем HTML:

<script src="../static/js/test.js"></script> <!-- this is the js file contains the drawChart function --> 

<div class='chart'> 
    <div id='chart1'></div> 
</div> 
<script>drawChart('chart1','pathToCsvData',ture, 200);</script>

в мой JS код:

function drawChart(toChart,dataURL,showLegend,chartHeight) 
{ 
    var chart1 = c3.generate({ 
     bindto: toChart, 
     data: { 
      url: dataURL, 
      labels: false 
     }, 
     color: {pattern: ['green','black']}, 
     zoom: {enabled: false}, 
     size: {height: chartHeight}, 
     transition: {duration: 0}, 
     legend: {show: showLegend} 
    }); 
}

код JS служить в качестве шаблона, и я могу как много разных шаблонов я хочу, поместить их в функции, с настроенным параметром диаграммы и вызов функции js в html-коде.

источник

2015-06-25 14:02:33 Xiangwu

Как сделать таблицы многократного использования/шаблонов в c3js

ответ

Смежные вопросы