Google visualization 谷歌图表定制_Google Visualization

Google visualization 谷歌图表定制

google-visualization

Google visualization 谷歌图表定制,google-visualization,Google Visualization,我希望下面的谷歌图表（柱状图）在水平轴上显示它的第一个标签。我还希望每列都有相同的宽度；第一列和最后一列需要更改。怎么可能呢 var chartDataRaw = [{ "month": "201211", "articles": 41467 }, { "month": "201212", "articles": 31820 }, { "month": "201301", "articles": 43817 }, {

我希望下面的谷歌图表（柱状图）在水平轴上显示它的第一个标签。我还希望每列都有相同的宽度；第一列和最后一列需要更改。怎么可能呢

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);

编辑：添加图表数据

通过将corechart visualization版本更改为1.1，自己修复了它

google.load("visualization", "1.1", {packages:["corechart"]});

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

google.load("visualization", "1.1", {packages:["corechart"]});

执行摘要你犯下了一些致命的罪行：

您没有正确定义日期

您没有扭曲数据的y轴值

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

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

您没有正确定义日期看看2013年1月的价值。上面写着31820篇文章。问题是你的数据显示一月份有43817篇文章。到底发生了什么事

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

旧的：新的：您没有扭曲数据的y轴值比较第二条和第三条。两者的比例是多少？看起来第二条大约是0.5格线，第三条大约是3.5格线。这是一个700%的文章增长

如果你看一下数据，它实际上从31820上升到43817，只增加了37%

，否则，数据的透视图会发生难以置信的扭曲，尤其是在并没有标签可引导的情况下

旧的：新的：您正在使用列来描述连续系列列显示离散项。如果我想调查一个班里有多少孩子，比如狗、猫和鬣蜥，柱形图很好，因为它可以让我比较不相关类别（水平）的受欢迎程度（高度）。列可以显示每个月的销售额（或每个月的文章），但如果将它们设为列，则意味着这些列应作为单个项目进行比较，而不是作为一个系列进行比较

如果您想显示这些数据项是连接的（如趋势线所示），那么显示面积图将更有意义

（理想情况下，面积图将显示过去30天的文章，并有每日数据，而不是每月汇编，因为月份是任意的截止日期，周末和假期等事情可能会对您的数据产生重大影响，从而进一步扭曲您试图显示的内容）

古老的新的您仅基于6个数据点进行预测六点并不是一个趋势。您的数据的最高值是第二个点，但您显示的趋势是随着时间的推移而增加。也许趋势线暗示了一个上升趋势（因为后面的值高于第一个值），但一旦你向前移动1个月，你就会有一个下降趋势线（除非文章大量增加）

这毫无道理。5个月的数据相同。改变6个月系列中的1个月如何改变趋势线的方向？预测本身就有点不确定（见），但以最少6个月的时间序列进行预测可能不是最好的。这意味着趋势线可能应该被完全删除，因为它不仅不能传递有用的信息，还可能传递不正确的信息

总结也就是说，如果您只想不切断左右列，可以更改以下代码：

古老的新的执行摘要你犯下了一些致命的罪行：