Question

我已经尝试了3天让这个图表显示我想要的方式。一切都在100％工作，直到我意识到分组的条形图数字已关闭。

示例：当底栏值等于10且顶栏值等于20时，分组栏的顶部显示为30.这是默认行为，但不是我想要表示数据的方式。我希望分组栏的顶部能够读取最高数字，这使我this fiddle完全按照我想要的方式表示数据。

重构我的逻辑后，this是我到目前为止所拥有的。正如您所看到的那样，时间序列线被分解，工具提示不会使数据组悬停在上面。

我的问题：

1）如何获取工具提示以呈现所有三个数据点（数量，价格，搜索）

2）如何固化时间序列线，以便它不会断开

任何帮助都会非常感激，所以我可以继续这3天的头痛！

下面是我的大部分代码 - 为简洁起见排除了JSON数组，可以在我上面的jsfiddle链接中获得。提前感谢您的时间。

var chart = c3.generate({
        bindto: '#chart',
        data: {
            x: 'x-axis',
            type: 'bar',
            json: json,
            xFormat: '%Y-%m-%d',
            keys: {
                x: 'x-axis',
                y: 'searches',
                value: ['qty', 'searches', 'price']
            },
            types: {
                searches: 'line'
            },
            groups: [
                ['qty', 'price']
            ],
            axes: {
                qty: 'y',
                searches: 'y2'
            },
            names: {
                qty: 'Quantity',
                searches: 'Searches',
                price: 'Price ($)'
            },
            colors: {
                price: 'rgb(153, 153, 153)',
                qty: 'rgb(217, 217, 217)',
                searches: 'rgb(255, 127, 14)'
            }
        },
        bar: {
            width: {
                ratio: 0.60
            }
        },
        axis: {
            x: {
                type: 'timeseries',
                label: { text: 'Timeline', position: 'outer-right' },
                tick: {
                    format: '%Y-%m-%d'
                }
            },
            y: {
                type: 'bar',
                label: {
                    text: 'Quantity / Price',
                    position: 'outer-middle'
                }
            },
            y2: {
                show: true,
                label: {
                    text: 'Searches',
                    position: 'outer-middle'
                }
            }
        },
        tooltip: {
            grouped: true,
            contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
                var data = this.api.data.shown().map(function(series) {
                    var matchArr = series.values.filter(function(datum) {
                        return datum.value != undefined && datum.x === d[0].x;
                    });
                    if (matchArr.length > 0) {
                        matchArr[0].name = series.id;
                        return matchArr[0];
                    }
                });
                return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color);
            }
        }
    });

Answer 1

1）如果我做对了，你希望工具提示显示所有值，即使其中一些值为空。默认情况下隐藏空值。您可以将它们替换为零（如果它适合您的任务），从而使它们可见。

此外，在我看来，有一个更短的方法来获得分组值：

var data = chart.internal.api.data().map(function(item) {
  var row = item.values[d[0].index];       // get data for selected index
  if (row.value === null) row.value = 0;   // make null visible
  return row;
});

2）我认为你在谈论line.connectNull选项：

line: {
  connectNull: true
}

<强>更新
看起来重复键会破坏 api.data（）方法的工作您需要更改json结构以使密钥唯一：

<强>之前：

var json = [
  {"x-axis":"2017-07-17","qty":100},
  {"x-axis":"2017-07-17","price":111},
  {"x-axis":"2017-07-17","searches":1},
  {"x-axis":"2017-07-18","qty":200},
  {"x-axis":"2017-07-18","price":222},
  {"x-axis":"2017-07-18","searches":2}
];

<强>后：

var json = [
  {"x-axis":"2017-07-17","qty":100,"price":111,"searches":1},
  {"x-axis":"2017-07-18","qty":200,"price":222,"searches":2}
];

请参阅 fiddle 。

C3.js组合图表与时间序列 - 工具提示不起作用

1 个答案: