Question

要更改磅值，我将pointsize设置为10（例如）。

    options: {
        pointSize: 10,
    }

我想在这一点上添加一个边框。有什么想法吗？

Answer 1

使用数据视图，您可以使用列角色将样式应用于所有行...

此处，视图将包含数据中的列0, 1，
并为样式添加第三个计算列...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    return 'point {stroke-color: #F00; stroke-width: 2;}';
  },
  role: 'style',
  type: 'string'
}]);

然后在绘制仪表板时必须使用view ...

dashboard.draw(view);

请参阅以下工作代码段...

google.charts.load('current', {packages: ['corechart', 'controls'],'language': 'fr'});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1AOVg0jYaDvoHQeXBcDtJ6HdkBkkcQhEBi9Xo_crOvlk/edit?usp=sharing');
query.send(drawDashboard);
}

function drawDashboard(response) {
var data = response.getDataTable();



    var chart = new google.visualization.ChartWrapper({
        chartType: 'AreaChart',
        containerId: 'chart_div',
        options: {
            // width and chartArea.width should be the same for the filter and chart
            height: 400,
      colors: ['#4aadde'],
      curveType: 'function',
      pointSize: 5,
            chartArea: {
                width: '75%'
            },
    title: 'Company Performance',
        hAxis: {title: 'Year',  titleTextStyle: {color: '#333'},format: 'd MMM yyyy' },
        vAxis: {minValue: 0}
        }
    });
        var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'point {stroke-color: #F00; stroke-width: 2;}';
    },
    role: 'style',
    type: 'string'
  }]);

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
        'chartType': 'AreaChart',
                chartOptions: {
                    height: 50,
          areaOpacity: 0.9,
          colors: ['#5dade0'],
                    chartArea: {
                        width: '75%'
                    }
                },
                minRangeSize: 86400000, // 86400000ms = 1 day
                snapToData: true
            }
        },

        state: {
            range: {
                // set the starting range to January 2012
                start: new Date(2017, 05, 15),
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div'));
    dashboard.bind([control], [chart]);
    dashboard.draw(view);

    function zoomLastDay () {
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
                end: range.max
            }
        });
        control.draw();
    }
    function zoomLastWeek () {
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
                end: range.max
            }
        });
        control.draw();
    }
    function zoomLastMonth () {
        // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
        // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
        // you can tweak this to make it function differently if you want
        var range = data.getColumnRange(0);
        control.setState({
            range: {
                start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
                end: range.max
            }
        });
        control.draw();
    }

    var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
        google.visualization.events.removeListener(runOnce);

        if (document.addEventListener) {
            document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
            document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
            document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
        }
        else if (document.attachEvent) {
            document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
            document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
            document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
        }
        else {
            document.querySelector('#lastDay').onclick = zoomLastDay;
            document.querySelector('#lastWeek').onclick = zoomLastWeek;
            document.querySelector('#lastMonth').onclick = zoomLastMonth;
        }
    });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
    <input id="lastDay" type="button" value="Hier" />
    <input id="lastWeek" type="button" value="Dernière semaine" />
    <input id="lastMonth" type="button" value="Dernier mois" />
    <div id="chart_div"></div>
    <div id="control_div"></div>
</div>

注意：以下行（小提琴中的最后一行）适用于旧的jsapi库它不是必需的，应该删除......

google.load('visualization', '1', {packages:['controls'], callback: drawChart});

Google Chart：带边框的点

1 个答案: