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

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

使用仪表盘图表类型时，必须为threshold值。其他图表类型不希望使用此属性。

如何忽略或有条件地增加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" />

最佳答案

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

关于javascript - 在c3中有条件地添加或省略JavaScript属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50042155/