在 c3 中有条件地添加或省略 JavaScript 属性

Question

我正在使用一个函数来绑定多个 C3 图表。

使用仪表图表类型时，需要 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: {
        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" />

Answer 1

您可以先使用所有常用键构建一个对象，然后您可以有条件地添加您可能需要的任何新键。

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" />

Answer 2

您可以创建一个初始对象，然后简单地使用 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" />

在 c3 中有条件地添加或省略 JavaScript 属性

Conditionally add or omit JavaScript properties within c3

javascript

charts

properties

d3.js

c3.js