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

Question

我正在使用单个函数绑定(bind)多个 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

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

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