自定义 jQuery 个堆栈图

Question

我正在尝试将用户与工作绩效绘制成条形图。我可以使用 canvasjs.com as,

将其实现为堆栈图

但我必须根据时间拆分每个部分。所以我必须像这样实现图表，

有没有办法自定义图表或者是否有任何 jQuery 库可用于此

如果这是一个重复的问题，请原谅我我不知道如何在 google 中搜索它。抱歉我的语言不好。

Answer 1

使用 google 图表，您可以使用多个系列（数据 table 列），
创建图表。

使用series选项为每个设置颜色，
并隐藏重复的图例条目。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Anthracite', 'Lignite', 'Anthracite', 'Lignite', 'Anthracite', 'Lignite'],
    ['USA', 50000, 20000, 50000, 20000, 50000, 20000],
    ['Russia', 40000, 25000, 30000, 15000, 50000, 23000],
    ['China', 12000, 26000, 51000, 24000, 51000, 22000]
  ]);

  var options = {
    isStacked: true,
    legend: {
      position: 'bottom'
    },
    series: {
      0: {  // Anthracite 1
        color: 'blue'
      },
      1: {  // Lignite 1
        color: 'red'
      },
      2: {  // Anthracite 2
        color: 'blue',
        visibleInLegend: false
      },
      3: {  // Lignite 2
        color: 'red',
        visibleInLegend: false
      },
      4: {  // Anthracite 3
        color: 'blue',
        visibleInLegend: false
      },
      5: {  // Lignite 3
        color: 'red',
        visibleInLegend: false
      }
    }
  };

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

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

自定义 jQuery 个堆栈图

Customize jQuery stack chart

jquery

charts

canvasjs