自定义 jQuery 堆栈图答案

【问题标题】：Customize jQuery stack chart自定义 jQuery 堆栈图
【发布时间】：2018-03-12 14:49:15
【问题描述】：

我正在尝试将用户与工作绩效绘制成条形图。我可以使用 canvasjs.com 将其实现为堆栈图，

但我必须根据时间拆分每个部分。所以我必须实现类似

的图表

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

如果这是一个重复的问题，请原谅我，我不知道如何在谷歌中搜索。对不起，我的语言不好。

【问题讨论】：

根据我的经验，没有图表库支持堆叠柱形图或条形图中的重复颜色。如果您可以为堆叠的元素使用不同的颜色，Highcharts 将是一个选择。它对非商业用户是免费的，而且对大多数其他用户群体来说都是负担得起的。
你的意思是重复的颜色还是别的意思？如果颜色重复，您可以使用 addColorSet 添加只有 2 种颜色的 colorSet

标签： jquery charts canvasjs

【解决方案1】：

使用谷歌图表，可以使用多个系列（数据表列），
创建图表。

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

请参阅以下工作 sn-p...

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>

【讨论】：