Question

我正在使用Google Chart API创建直方图，并希望修改条以使其与旁边的条融合，并将xticks更改为整数。

问题：

如何执行以下操作：

将条形图与旁边的条形图融合吗？
让h / x标记显示为import 'package:flutter/material.dart'; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; class WebviewInFlutter extends StatefulWidget { WebviewInFlutter({Key key}) : super(key: key); @override _WebviewInFlutterState createState() => _WebviewInFlutterState(); } class _WebviewInFlutterState extends State<WebviewInFlutter> { final FirebaseMessaging _messaging = FirebaseMessaging(); @override void initState(){ super.initState(); _messaging.getToken().then((token) { print(token); }); _messaging.configure( onMessage: (Map<String, dynamic> message) async{ print('on message $message'); }, onResume: (Map<String, dynamic> message) async{ print('on resume $message'); }, onLaunch: (Map<String, dynamic> message) async{ print('on launch $message'); }, ); _messaging.requestNotificationPermissions( const IosNotificationSettings(sound: true, badge: true, alert: true)); } final flutterWebviewPlugin = new FlutterWebviewPlugin(); @override Widget build(BuildContext context) { return WebviewScaffold( url: 'https://google.com', hidden: true, appCacheEnabled: true, withJavascript: true, withLocalStorage: true, appBar: AppBar( actions: <Widget>[ IconButton( icon: Icon(Icons.refresh, color: Color.fromRGBO(255, 255, 255, 1.0),), onPressed: () => flutterWebviewPlugin.reload(), // this is reloading the url that was provided to webview, not the current URL. ) ], elevation: 1.0, centerTitle: true, title: Text("Google Mobile") ), ); } }吗？

当前输出：

理想的输出：

相关研究：

除了这两个有助于解决我的一些问题的东西之外，我找不到那么多了，但上述两个问题却没有：

MWE：

int

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
     ['MyData', 'Value'],
     ['Val', 25.4],
     ['Val', 25.4], 
     ['Val', 25.4],
     ['Val', 25.4], 
     ['Val', 25.6],
     ['Val', 25.8],    
     ['Val', 25.8]
     ]);
  var options = {
   title: 'Stats',
   legend: {position: 'none'}, 
   width: 1100,
   height: 500,
   chartArea: {width: 900, height: 150},
   colors: ['#ff0000'],
   histogram: {bucketSize: 0.2, minValue: 22, maxValue: 28, hideBucketItems: true},
   // bar: { width: 5},
   // bar: {groupWidth: 0 },
   vAxis: {
      title: 'Frequency',
      titleTextStyle: {bold: false, italic: false},
      gridlines: {color: "white"},
      ticks: [1,2,3,4,5,6,7],
      }, //END V-AXIS
   hAxis: { 
      title: 'Values', 
      titleTextStyle: {bold: false, italic: false},
      type: 'category', 
      ticks: [22, 23, 24, 25, 26, 27, 28], // THIS IS NOT WORKING?!!!?
      }  //END H-AXIS
  }; //END OPTIONS

  var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Answer 1

为了让hAxis.ticks工作，
删除选项hAxis.category
（不确定这样做是什么，在参考文献中没有看到它）

为了消除条之间的间隙，
必须使用以下选项。

bar: {
  gap: 0
},

并使用Google图表的冻结版本'45.2'（或更低版本）...

google.charts.load('45.2', {...

请参阅以下工作片段...

google.charts.load('45.2', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['MyData', 'Value'],
    ['Val', 25.4],
    ['Val', 25.4], 
    ['Val', 25.4],
    ['Val', 25.4], 
    ['Val', 25.6],
    ['Val', 25.8],    
    ['Val', 25.8]
  ]);
  var options = {
    title: 'Stats',
    legend: {position: 'none'},
    width: 1100,
    height: 500,
    chartArea: {width: 900, height: 150},
    colors: ['#ff0000'],
    histogram: {bucketSize: 0.2, minValue: 22, maxValue: 28, hideBucketItems: true},
    bar: {
      gap: 0
    },
    vAxis: {
      title: 'Frequency',
      titleTextStyle: {bold: false, italic: false},
      gridlines: {color: "white"},
      ticks: [1,2,3,4,5,6,7],
    }, //END V-AXIS
    hAxis: {
      title: 'Values',
      titleTextStyle: {bold: false, italic: false},
      //type: 'category',
      ticks: [22, 23, 24, 25, 26, 27, 28]
    }  //END H-AXIS
  }; //END OPTIONS

  var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts API：直方图，如何融合钢筋并将x-ticks更改为整数

1 个答案: