【问题标题】:Google Line chart, remove extra lines谷歌折线图,去除多余的线条
【发布时间】:2014-01-31 01:49:07
【问题描述】:

我是 Google 图表的新手,我正在尝试在下面的照片(预期)中生成此图表 但我得到了一些不同的图表。我有三个不同的字母,每个字母都包含它们自己的值(A1、A2、A3、B1、B2 ... 例如)。

我正在尝试的代码:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('string', 'Type');
    data.addColumn('number', 'Value');

    data.addRows([
    [new Date(2014, 0, 30), 'A', 75],
    [new Date(2014, 0, 30), 'A', 100],
    [new Date(2014, 0, 30), 'A', 125],

    [new Date(2014, 0, 31), 'A', 75],
    [new Date(2014, 0, 31), 'A', 100],
    [new Date(2014, 0, 31), 'A', 125],

    [new Date(2014, 0, 30), 'B', 150],
    [new Date(2014, 0, 30), 'B', 175],
    [new Date(2014, 0, 30), 'B', 200],

    [new Date(2014, 0, 31), 'B', 150],
    [new Date(2014, 0, 31), 'B', 175],
    [new Date(2014, 0, 31), 'B', 200],
]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'A',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
        }
    }, {
        type: 'number',
        label: 'B',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
        }
    }, {
        type: 'number',
        label: 'C',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
        }
    }, 2]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        hAxis: {
            format: 'dd.MM.yyyy',
            minValue: new Date(2014, 0, 29, 12),
            maxValue: new Date(2014, 0, 31, 10)
        },
        series: {
            0: {
                // series A options
                pointSize: 5,
                lineWidth: 0

            },

            3: {
                // this series draws the line
                pointSize: 0,
                lineWidth: 1,
                visibleInLegend: false,
                enableInteractivity: false,
                color:'blue'
            }
        }
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

它向我展示了这一点,我不知道如何删除 31.01.2014 -> A3 和 30.01.2014->B1 中的一条线以及蓝点蓝线和红点红线的线颜色是否可能? :

但预期如下:

【问题讨论】:

  • 请分享您尝试过的代码,以及为什么它不起作用。
  • jmac 我添加了我正在尝试的代码,如果你能帮助我会更好。谢谢
  • 生成难吗?

标签: google-visualization linegraph


【解决方案1】:

在这种情况下,我对您的previous question 的回答并不是解决此问题的最佳方法,但有一个简单的解决方案可以修改您现有的代码以使其工作。从传递给view.setColumns的数组末尾删除2

view.setColumns([0, {
    type: 'number',
    label: 'A',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: 'B',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: 'C',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
    }
}]);

并调整您的系列选项:

series: {
    0: {
        // series A options
        pointSize: 5,
        lineWidth: 1
    },
    1: {
        // series B options
        pointSize: 5,
        lineWidth: 1
    },
    2: {
        // series C options
        pointSize: 5,
        lineWidth: 1
    }
}

【讨论】:

  • asgallant 非常感谢它正在工作!现在我需要将它实现到我的项目中,我需要生成 json 并通过“DataTable”提供这些数据 php 数组中的数据结构是什么?当我问我之前的问题时,我给出了一个示例 php 数组。例如
  • 您是在问一般的结构是什么,或者如何具体复制您的 DataTable?
  • 是的,我想知道数据结构是怎样的,我将从数组中获取数据,是否可以动态使用此脚本我的意思是用户将选择一些选项,并根据这些选项生成数组可能有 5 个字母(A、B、C、D、E),现在一切都是硬编码的,我不知道会有多少个字母我的意思是我不知道会有多少个系列
  • 您使用什么编程语言来构建 DataTable?
  • 我正在使用 PHP 和数据库 MySQL
猜你喜欢
  • 1970-01-01
  • 2013-07-25
  • 2018-03-06
  • 2013-07-03
  • 1970-01-01
  • 1970-01-01
  • 2014-07-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多