小编Whi*_*Hat的帖子

中心对齐 Google 仪表图

我正在努力让谷歌仪表图居中对齐。

我想要一行带有居中仪表字符的行和一行带有居中折线图的行。

我尝试了各种选项并使用“display: inline-block”但不起作用。带有折线图的行的行为符合预期。

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge', 'corechart']});
      google.charts.setOnLoadCallback(drawCharts);

      function drawCharts() {
        drawChart();
        drawGauges();
      }

      function drawGauges() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
        ]);

        var w = $( window ).width();
        var x = Math.floor(w * 0.3);
        console.log("width: " + w + ", x = " + x);
        var h = $( window ).height();
        var y = Math.floor(h * …

Run Code Online (Sandbox Code Playgroud)

css charts google-visualization gauge flexbox

jch*_*ris

2017 03-24

2
推荐指数

1
解决办法

6256
查看次数

javascript - 对省略'this'关键字的困惑

有人可以解释以下行为吗？前两个示例按预期工作,但为什么最后一个示例不起作用？我想了解当我省略'this'关键字时发生了什么.好像我能够在前两个例子中省略它.

提醒您好:

$(document).ready(
    function()
    {
        hello = 'hello';

        function sayHello()
        {
            alert( this.hello );
        }

        sayHello();
    }
);

Run Code Online (Sandbox Code Playgroud)

提醒您好:

$(document).ready(
    function()
    {
        hello = 'hello';

        function sayHello()
        {
            alert( hello );
        }

        sayHello();
    }
);

Run Code Online (Sandbox Code Playgroud)

警告声明出错: Uncaught ReferenceError: hello is not defined

$(document).ready(
    function()
    {
        this.hello = 'hello';

        function sayHello()
        {
            alert( hello );
        }

        sayHello();
    }
);

Run Code Online (Sandbox Code Playgroud)

javascript jquery

Kac*_*acy

2015 09-25

1
推荐指数

1
解决办法

90
查看次数

谷歌图表时间线元素边框半径

我在弄清楚如何设置谷歌图表时间轴中元素的边框半径时遇到问题。我已经浏览了所有选项，但似乎没有一个适合这一点。我尝试过手动设置它，但没有任何运气。有人有解决这个问题的办法吗？

提前谢谢

javascript css charts google-visualization

作者

2016 12-12

1
推荐指数

1
解决办法

3105
查看次数

如何在 Google 时间线图表中使用点击功能

我正在使用 Google 时间线图表并想使用点击功能。只是当我点击彩色矩形或文本时，我想要一个 bootstrap Modal 出现。

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
  [ 'Magnolia Room', 'Beginning JavaScript',       new Date(2017, 1, 30),  
new Date(2017, 2, 30) ],
  [ 'Learning for Life', 'Intermediate JavaScript',    new Date(2017, 3, 1),  
new Date(2017, 4, 30) ], …

Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

Hek*_*ade

2017 05-24

1
推荐指数

1
解决办法

1809
查看次数

谷歌可视化 - 设置饼图切片颜色

我有一个用于饼图的数据表,我需要根据行中的值设置切片的颜色.例如,我有一个按类型划分的汽车销售表(例如租赁,现金,财务),我想为每一个指定颜色.在文档中,似乎可以使用条形图执行此操作,但我似乎无法使用切片执行此操作.我尝试了以下方法:

var pieChart = new google.visualization.ChartWrapper({
    options : {
        ...
        slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}]
    }
});

Run Code Online (Sandbox Code Playgroud)

色彩呈现得到,但我想说明black的lease.关于如何让这个工作的任何想法？

charts google-visualization

Mor*_*tch

2017 09-08

1
推荐指数

1
解决办法

1638
查看次数

Google 折线图 - 默认情况下在点上显示数据值

我想在折线图上显示数据值，即鼠标悬停时出现的数据值，我需要默认情况下全部显示。我在这里尝试了解决方案Google Charts API: Always show the Data Point Values in Graph

data.addColumn({type: 'number', role: 'annotation'});

Run Code Online (Sandbox Code Playgroud)

我将此添加到我的代码中（我不确定将它确切放在哪里）但它没有做任何更改。

这是我的代码的一部分：

<!DOCTYPE html>
<html>
<head>
    <title>Week/Orders</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([

                ['Week','Orders'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Week"]."', ".$row["Orders"]."],";
                    }
                ?>

               ]);


            var options = {
                title: 'Week Vs Orders',
                'width':1700,
                'height':600,

                legend: { position: 'bottom' }
                     };

               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options);  

        }

    </script>
</head>
<body> …

Run Code Online (Sandbox Code Playgroud)

charts google-visualization

Max*_*Max

2018 07-06

1
推荐指数

1
解决办法

2573
查看次数

谷歌折线图。删除多余的网格线或更改其颜色

我使用以下设置创建了谷歌折线图：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}

Run Code Online (Sandbox Code Playgroud)

我阅读了所有文档，但无法找到如何自定义这些额外的白色线条：