Условно добавить или опустить свойства JavaScript в c3 - PullRequest
Новая
       8

Условно добавить или опустить свойства JavaScript в c3

0 голосов
/ 26 апреля 2018

Я использую одну функцию для привязки нескольких C3 диаграмм.

При использовании типа диаграммы с датами требуется значение Порог . Это свойство нежелательно для других типов диаграмм.

Как пороговое свойство можно опустить или добавить условно? 

function bindChart(chartType) {
  let chart = c3.generate({
    bindto: '#Demo',
    data: {
      columns: [
        ['A', 95],
        ['B', 65],
        ['C', 11]
      ],
      type: chartType,
    },
    color: {
      pattern: ['#af5', '#ad3', '#a80', '#a00'],
      threshold: {
        values: [0, 50, 75, 100], //For gauge
      }
    },
  });
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.min.js"></script>

<button onclick="bindChart('pie');">PIE</button>
<button onclick="bindChart('gauge');">GAUGE</button>
<button onclick="bindChart('bar');">BAR</button>

<div id="Demo" />

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Вы можете создать исходный объект, а затем просто с помощью if / then добавить threshold, если это gauge, прежде чем передать его в c3.generate().

Фрагмент стека 

function bindChart(chartType) {
  let _chart = {
    bindto: '#Demo',
    data: {
      columns: [
        ['A', 95],
        ['B', 65],
        ['C', 11]
      ],
      type: chartType,
    },
    color: {
      pattern: ['#af5', '#ad3', '#a80', '#a00']      
    }
  }
  
  if (chartType == 'gauge') {
    _chart.color.threshold = { values : [0, 50, 75, 100] }
  };

  let chart = c3.generate(_chart);
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.min.js"></script>

<button onclick="bindChart('pie');">PIE</button>
<button onclick="bindChart('gauge');">GAUGE</button>
<button onclick="bindChart('bar');">BAR</button>

<div id="Demo" />

Или протестируйте его в строке с чем-то вроде этого, хотя я не знаю, будет ли это хорошо, если threshold все еще находится в объекте, хотя пусто 

function bindChart(chartType) {
  let chart = c3.generate({
    bindto: '#Demo',
    data: {
      columns: [
        ['A', 95],
        ['B', 65],
        ['C', 11]
      ],
      type: chartType,
    },
    color: {
      pattern: ['#af5', '#ad3', '#a80', '#a00'],
      threshold: ((chartType == 'gauge') ? {values: [0, 50, 75, 100]} : {})
    }
  });
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.min.js"></script>

<button onclick="bindChart('pie');">PIE</button>
<button onclick="bindChart('gauge');">GAUGE</button>
<button onclick="bindChart('bar');">BAR</button>

<div id="Demo" />

А если нет, то может вот так 

function bindChart(chartType) {
  let chart = c3.generate({
    bindto: '#Demo',
    data: {
      columns: [
        ['A', 95],
        ['B', 65],
        ['C', 11]
      ],
      type: chartType,
    },
    color: ((chartType == 'gauge') ? 
      { pattern: ['#af5', '#ad3', '#a80', '#a00'],
        threshold: {values: [0, 50, 75, 100]}} :
      { pattern: ['#af5', '#ad3', '#a80', '#a00'] }
      )
  });
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.min.js"></script>

<button onclick="bindChart('pie');">PIE</button>
<button onclick="bindChart('gauge');">GAUGE</button>
<button onclick="bindChart('bar');">BAR</button>

<div id="Demo" />
0 голосов
/ 26 апреля 2018

Сначала вы можете построить объект со всеми общими ключами, затем вы можете условно добавить любые новые ключи, которые вам могут понадобиться. 

function bindChart(chartType) {
  // Build base object with common keys
  let colorOptions = {
    pattern: ['#af5', '#ad3', '#a80', '#a00']
  };
  // Assuming the check is for the chartType to be guage
  if (chartType === 'gauge') {
    // Conditionally add new keys
    colorOptions.threshold = {
      values: [0, 50, 75, 100], //For gauge
    }
  }
  let chart = c3.generate({
    bindto: '#Demo',
    data: {
      columns: [
        ['A', 95],
        ['B', 65],
        ['C', 11]
      ],
      type: chartType,
    },
    color: colorOptions,
  });
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.min.js"></script>

<button onclick="bindChart('pie');">PIE</button>
<button onclick="bindChart('gauge');">GAUGE</button>
<button onclick="bindChart('bar');">BAR</button>

<div id="Demo" />
...