标签: c3

我正在尝试使用C3.js创建一个图表,但是有一个显示json数据的问题.

这是我的数据:

{StatsID: "1", label: "unique-visits", month: "2014-10", value: "17230"},
{StatsID: "2", label: "unique-visits", month: "2014-11", value: "17658"},
{StatsID: "3", label: "unique-visits", month: "2014-12", value: "15624"},
{StatsID: "4", label: "completes", month: "2014-10", value: "5323"},
{StatsID: "5", label: "completes", month: "2014-11", value: "6359"},
{StatsID: "6", label: "completes", month: "2014-12", value: "8216"},
{StatsID: "7", label: "quals", month: "2014-10", value: "552"},
{StatsID: "8", label: "quals", month: "2014-11", value: "318"},
{StatsID: "9", label: "quals", month: "2014-12", value: "332"}

理想情况下,我想要一个折线图,其中每一行代表一个标签,图上的每个点都是一个值.这可能吗？在我将这些数据输入图表时,它只显示所有这些值中的一行.

我正在使用C3.js绘制一些数据。我希望能够通过单击按钮显示图表，或者甚至在默认情况下通过图表显示最后一个数据点系列的工具提示。反正有这样做吗？他们的文档中有一个用于tooltip.show的部分，但没有文档。

缺少文件

我正在 D3 或 C3js 中寻找类似的东西：

C3 中的默认 Gauge Chart 将多列作为数据，但随后将它们显示在同一行上，因此它们相互覆盖。

是否可以在C3.js中创建类似于Highcharts的区域范围图表？我附上了截图并链接到实时样本http://www.highcharts.com/demo/arearange-line.

我们的想法是显示范围数据,可能是历史的高值和低值,然后用折线图覆盖当前年份的值.C3能做到吗？

提前致谢!

在这种情况下,我想在工具提示标题上显示180而不是0.我知道它可以像在c3官方文档中那样进行定制.但我找不到获得每列总量的方法.

我一直试图让x轴网格线落后于c3js条形图的内容.

我玩弄z-index但没用.我尝试了不透明度,也没用.

这是带有我正在使用的代码的JSFiddle.

https://jsfiddle.net/chaitanya81/rvhb0fy4/1/

var chart = c3.generate({
        bindto: '#chart',
        data: {
            x : 'x',
            columns: [
                ['x', 'M','T','W','TH','F','SA','SU'],
                ['revenue', 200, 300, 200, 400, 500, 700, 600.56]
            ],
            type: 'bar'
        },
        color: {
            pattern: ["#ff9900"]
        },
        axis: {
            x: {
                type: 'category', // this needed to load string x value
                tick: {
                    outer: false
                }
            },
            y: {
                tick: {
                    outer: false
                }
            }
        },
        grid: {
            x: {
                lines: [
                    {value: "M"},
                    {value: "T"},
                    {value: "W"},
                    {value: "TH"},
                    {value: …

我正在使用c3.js制作图表。我必须使工具提示的内容易于理解。到目前为止，只有当我将鼠标悬停在图表上时，工具提示才可见。我单击工具提示中的链接时会显示一些信息。我从c3文档中找不到任何帮助。我正在处理的代码片段如下所示。

$scope.timelineConfig.tooltip.contents = function (data, defaultTitleFormat, defaultValueFormat, color) {
    var $$ = this, config = $$.config,
    titleFormat = config.tooltip_format_title || defaultTitleFormat,
    nameFormat = config.tooltip_format_name || function (name) { return name; },
    valueFormat = config.tooltip_format_value || defaultValueFormat,
    text, i, title, value;
    text = "<div id='tooltip' class='d3-tip'>"; 
    title = dates[data[0].index];
    text += "<span class='info'><b><u>Date</u></b></span><br>";
    text += "<span class='info'>"+ title +"</span><br>";
    text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>";
    text += "<span class='info'><b><u>Enhancements</u> : </b> " …

我使用d3.js中的可重用图表从c3.js开发,但无法从对象数组中获取数据,我尝试了给定格式的代码.

    var chart=c3.generate({
          data:{
              json:[
             {"key":[2000],"value":100},{"key":[2001],"value":200},{"key":[2003],"value":300},{"key":[2004],"value":400},{"key":[2005],"value":500},{"key":[2006],"value":600},{"key":[2007],"value":700}
                      ],
              keys:{x:'key[0]',
                    value:'value',
              }
   },
             axis: {
          x: {
            type: "category"
          }
        }

})

我试图在数据更改时美化作为React组件编写的C3图表的更新.数据通过其props从父组件流向组件.

我现在的解决方案"有效"但似乎不是最佳的:当新数据进入时,整个图表会重新生成.我想转换到新状态(行移动而不是整个图表更新闪烁).C3 API似乎有很多方法,但我找不到如何到达图表.

var React = require("react");
var c3 = require("c3");

var ChartDailyRev = React.createClass({
    _renderChart: function (data) {
        var chart = c3.generate({
            bindto: '#chart1',
            data: {
              json: data,
              keys: {
                  x: 'date',
                  value: ['requests', 'revenue']
              },
              type: 'spline',
              types: { 'revenue': 'bar' },
              axes: {
                'requests': 'y',
                'revenue': 'y2'
              }
            },
            axis: {
                x: { type: 'timeseries' },
                y2: { show: true }
            }
        });
    },
    componentDidMount: function () {
        this._renderChart(this.props.data);
    },
    render: function () {
        this._renderChart(this.props.data);
        return ( …

我正在尝试使用c3.js timeseries折线图(URL:http://c3js.org/samples/timeseries.html ).唯一的区别是我使用CDN链接到js文件而不是下载它们.但是我一直收到以下错误

Chrome 未捕获错误:未为id ="date"定义x.

Firefox 错误:没有为id ="date"定义x.

抛出新错误('x未定义为id ="'+ id +'".'); | ------------ +

html文件如下

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css"/>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>

<script>
    var dates = ['20130101', '20130102', '20130103', '20130104', '20130105', '20130106'];
    var sample = [30, 200, 100, 400, 150, 250];

    var chart = c3.generate({
        bindto: '#chart',
        data: {
                x:'Dates',
                x_format:'%Y%m%d',
        columns: [
        //['Dates'].concat(dates),
        //['Sample'].concat(sample)
                ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
                ['sample', 30, 200, 100, 400, 150, 250] …