自定义jQuery堆栈图表

Question

我试图将用户与工作表现绘制为条形图。我可以使用canvasjs.com将其作为堆栈图实现为

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

的图表

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

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

Answer 1

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

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

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

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;