0

我想按照谷歌图表（柱形图）在水平轴上显示它的第一个标签。另外我希望每列具有相同的宽度；第一列和最后一列需要更改。这怎么可能？

当前图表布局

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/

编辑：添加图表数据

4

2 回答 2

5

执行摘要

你犯了几件大罪：

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

您没有正确定义日期

查看 2013 年 1 月的值。它显示 31,820 篇文章。问题是您的数据显示 1 月份有 43,817 篇文章。到底他妈发生了什么？

Javascript 日期对象使用 0-11 的月份值，而不是 1-12。这意味着当您转换日期时，您需要更改您的函数。

老的：

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

新的：

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

您没有扭曲数据的 y 轴值

比较第二条和第三条。两者的比例是多少？看起来第二个条大约是 0.5 条网格线，第三条条大约是 3.5 条网格线。文章数量增加了 700%！

只看数据，其实是从31820涨到43817，涨幅只有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个月的数据是一样的。更改 6 个月系列中的 1 个月如何改变趋势线的方向？预测本身就不够可靠（请参阅黑天鹅理论），但在最少 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)
    },
于 2013-08-22T04:04:15.883 回答
0

通过将 corechart 可视化版本更改为 1.1 自己修复了它

google.load("visualization", "1.1", {packages:["corechart"]});
于 2013-08-20T15:43:31.967 回答