Question

是否可以使用Google图表创建类似下面的图表？

我不知道该怎么做，所以我决定尝试使用烛台图。

使用以下基本入门代码：

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


    /*CANDEL CHART*/

function candleChart() {
var data = google.visualization.arrayToDataTable([
  ['Jan', 20, 28, 38, 45],
  ['Feb', 31, 38, 55, 66],
  ['Mar', 50, 55, 77, 80],
  ['Apr', 77, 77, 66, 50],
  ['May', 68, 66, 22, 15],
  ['jun', 68, 66, 22, 15],
  ['Jul', 68, 66, 22, 15],
  ['Aug', 68, 66, 22, 15],
  ['Sep', 68, 66, 22, 15],
  ['Oct', 68, 66, 22, 15],
  ['Nov', 68, 66, 22, 15],
  ['Dec', 68, 66, 22, 15]
  // Treat first row as data as well.
], true);




var options = {
  legend:'none'
};

var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));

chart.draw(data, options);
}

但这不是我想要的，我不知道从哪里开始，也找不到任何有关如何使其像图像中的图表一样的文档。

垂直线需要像图像中一样以0为中心，正数在其下方增加，正数在其上方增加。

底部的蓝色条是未被接受的竞争者总数。绿条表示确实被接受的竞争对手总数。

该行将代表用户在该号码中的位置。

请帮助我不知道从哪里开始。预先谢谢你！

Answer 1

使用带有3个系列/ y轴列的ComboChart。

对于前两个系列，请使用堆叠的列。第一个是负值，第二个是正值。

isStacked: true,
seriesType: 'bars',

第三个，将系列类型更改为line。

series: {
  2: {
    type: 'line'
  }
},

数据应类似于以下内容。

['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    ['Jan', -125, 100, -10],
    ['Feb', -100, 125, 5],
    ['Mar', -200, 415, 205],
    ['Apr', -375, 180, -190],
    ['May', -180, 240, 100],
    ['Jun', -160, 100, -205],
    ['Jul', -125, 80, -12],
    ['Aug', -175, 110, -25],
    ['Sep', -100, 220, 150],
    ['Oct', -110, 390, 240],
    ['05 Nov', -10, 25, 30],
  ])

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 16,
      right: 16,
      bottom: 60,
      left: 60
    },
    colors: ['#03a9f4', '#cddc39', '#616161'],
    hAxis: {
      title: 'FY 18'
    },
    height: '100%',
    isStacked: true,
    legend: {
      position: 'none'
    },
    pointSize: 6,
    series: {
      2: {
        type: 'line'
      }
    },
    seriesType: 'bars',
    vAxis: {
      ticks: [
        {v: -400, f: '400'},
        {v: -200, f: '200'},
        0,
        200,
        400
      ],
      title: 'Amount'
    },
    width: '100%'
  }

  var chart = new google.visualization.ComboChart(document.getElementById('chart'))
  chart.draw(data, options)
});

#chart {
  height: 320px;
}

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

Answer 2

就是这样：

var options = {vAxis: { ticks: [-80,-40,0,40,80] }}

通读文档！谷歌图表网站上的每个页面都会列出该图表类型的所有配置选项：超级有用的内容。

从gcharts示例application/json中窃取了工作中的JS小提琴。

从垂直线GOOGLE CHARTS的中间创建值“ 0”的组合条形图和折线图

2 个答案: