Google图表自定义

Question

我想跟随谷歌图表(柱形图)在水平轴上显示它的第一个标签.我还希望每列具有相同的宽度; 第一列和最后一列需要更改.这怎么可能？

var chartDataRaw = [{
    "month": "201211",
        "articles": 41467
}, {
    "month": "201212",
        "articles": 31820
}, {
    "month": "201301",
        "articles": 43817
}, {
    "month": "201302",
        "articles": 42773
}, {
    "month": "201303",
        "articles": 38695
}, {
    "month": "201304",
        "articles": 41257
}];

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('date', 'Month');
dataTable.addColumn('number', 'Articles');

var i = 1;

//chartDataRaw is array of objects, requested from server. looped through jquery each to fill dataTable
$.each(chartDataRaw, function () {

    var year = this.month.substring(0, 4);
    var month = this.month.substring(4);

    var dataItem = [new Date(year, month), this.articles];

    dataTable.addRow(dataItem);

});

var options = {
    title: 'Company Coverage',
    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px'
    },
    vAxis: {
        textPosition: 'none'
    },
    trendlines: {
        0: {
            color: 'black',
            lineWidth: 3,
            opacity: 0.4
        }
    },
    legend: 'none'
};

var monthYearFormatter = new google.visualization.DateFormat({
    pattern: "MMM, yyyy"
});
monthYearFormatter.format(dataTable, 0); //change date format to render on chart


var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);

http://jsfiddle.net/YyYsN/2/

编辑:添加图表数据

Answer 1

执行摘要

你犯了几个致命的罪:

1. 你没有正确定义日期
2. 您没有扭曲数据的y轴值
3. 您正在使用列来描述连续系列
4. 您仅基于6个数据点进行预测

你没有正确定义日期

看看2013年1月的价值.它说31,820篇文章.问题是你的数据显示1月份有43817篇文章.到底他妈发生了什么？

Javascript日期对象使用0-11的月值,而不是1-12.这意味着当您转换日期时,您需要更改您的功能.

旧:

var dataItem = [new Date(year, month), this.articles];

新:

var dataItem = [new Date(year, month - 1), this.articles];

您没有扭曲数据的y轴值

将第二个柱与第三个柱进行比较.两者之间的比例是多少？看起来第二个栏位于.5网格线附近,第三个栏位于3.5个网格线附近.这篇文章增加了700%!

只有你看数据,它实际上从31,820到43,417,并且只增加了37%.

条形图应始终从零开始,否则您将获得令人难以置信的数据视角,尤其是在没有标签启动时.

旧:

    vAxis: {
        textPosition: 'none',
    },

新:

    vAxis: {
        textPosition: 'none',
        minValue: 0
    },

您正在使用列来描述连续系列

列显示离散项.如果我想查看班级中有多少孩子,如狗,猫和鬣蜥,柱形图很棒,因为它允许我比较不相关类别(水平)的流行度(高度).列可以显示每月的销售额(或每月的文章数),但通过将它们设为列,您暗示应将列作为单个项目进行比较,而不是作为进度系列进行比较.

如果要显示这些数据项是连接的(如趋势线所暗示的那样),则显示区域图表会更有意义.

(理想情况下,区域图表会显示过去30天内的文章,并且每日都有数据,而不是每月汇编,因为几个月是任意截止日期,周末和假期等事情可能对您的数据产生重大影响,这进一步扭曲了您的内容'试图表明).

旧

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

新

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

您基于仅6个数据点进行预测

六点不是趋势.您的数据的最高值是第二点,但您显示趋势随着时间的推移而增加.也许趋势线表明上升趋势(因为后来的值高于第一个值),但是一旦你向前移动1个月,你将有一个下降趋势线(除非文章大幅增加).

这没有理智意义.5个月的数据是相同的.如何更改1个月的6个月系列改变趋势线的方向？预测是不够的(参见黑天鹅理论),但在最短的6个月系列中进行预测可能不是最好的.这意味着趋势线可能应该被完全删除,因为它不仅不传达有用信息,而且可能传达不正确的信息.

摘要

也就是说,如果您只想切断左右列,可以更改以下代码:

旧

    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px',
    },

新

    hAxis: {
        title: 'Last Six Months',
        titleTextStyle: {
            color: 'red'
        },
        format: 'MMM, yyyy',
        fontSize: '8px',
        minValue: new Date(2012,9),
        maxValue: new Date(2013,4)
    },