javascript 人力车条形图宽度=NaN答案

【问题标题】：javascript rickshaw bar graph width=NaNjavascript 人力车条形图宽度=NaN
【发布时间】：2013-12-19 09:43:01
【问题描述】：

我正在尝试使用一组非常基本的数据绘制人力车条形图，出于某种原因，当我创建自己的系列数组（颜色：字符串，数据：[{}] 和名称：字符串）时，我得到了这个错误：

错误：属性 width="NaN" 的值无效

如果我查看为图表的每个条形创建的元素，它们确实有 width=NaN：

var json = '@Html.Raw(Json.Encode(Model))';
    var array = $.parseJSON(json);
    var dataArray = [];

    var palette = new Rickshaw.Color.Palette({ scheme: 'classic9' });

    for (var i = 0; i < array.length; i++) {
        dataArray.push( 
            {
                color: palette.color(),
                data: [{x: i, y: array[i].Value}],
                name: array[i].Key
            });
    }

    console.log(dataArray);

    var graph = new Rickshaw.Graph({
        element: document.querySelector("#chart"),
        renderer: 'bar',
        width: 420,
        height: 280,
        series: dataArray
    });

    graph.render();

<rect x="0" y="208.95816646947355" width="NaN" height="71.04183353052643" transform="matrix(1,0,0,1,0,0)" fill="#2f254a"></rect>
<rect x="0" y="168.32890323029957" width="NaN" height="40.6333259065763" transform="matrix(1,0,0,1,0,0)" fill="#491d37"></rect>
<rect x="0" y="133.60905003661946" width="NaN" height="34.71985319368011" transform="matrix(1,0,0,1,0,0)" fill="#7c2626"></rect>

谢谢。

【问题讨论】：

标签： javascript rickshaw

【解决方案1】：

实际上这是人力车的一个已知问题：具有多个数据点的一个系列有效，具有多个数据点的多个系列有效，每个只有一个数据点的多个系列不起作用。这是我的情况。

改变了我设计图表的方式来解决这个问题。

谢谢！

【讨论】：