chartjs добавляет точки к столбцам в сгруппированной столбчатой ​​диаграмме - PullRequest
Новая
       27

chartjs добавляет точки к столбцам в сгруппированной столбчатой ​​диаграмме

0 голосов
/ 09 марта 2019

С chart.js я сгруппировал бары.

Я сгруппировал бары с определенными динамическими значениями, но у меня также есть ожидания от этих значений. Поэтому я хочу добавить индикатор ожидания для сгруппированных баров.

В основном, более простая версия этого: enter image description here

Вместо точек это также может быть линия или что-то в этом роде.

Теперь у меня есть гистограмма группы с несколькими точками, которые совпадают с соответствующими столбцами, но точки не соединяются с столбцами. Как это исправить? 

var data = {
  labels: ["January", "February", "March"],
      datasets: [
        {
          label: "Apples",
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [40, 20, 20],
          stack: 'Stack 1'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 1'
        },
        {
          label: "Apples",          
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [30, 30, 10],
          stack: 'Stack 2'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 2'
        },
        {
          label: "Apples",          
          type: "scatter",
          fill: false,
          showLine: false,
          backgroundColor: "rgba(99,255,132,0.2)",
          data: [20, 10, 30],
          stack: 'Stack 3'
        },
        {
          label: "Cookies",
          backgroundColor: "rgba(255,99,132,0.2)",
          data: [60, 20, 20],
          stack: 'Stack 3'
        },
      ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        //stacked: true,
      }],
      yAxes: [{
        ticks: {
          max: 160,
        },
        stacked: true,
      }]
    }
  }
});

Вот моя скрипка: http://jsfiddle.net/CorneelDragon/kd9xqnc1/23/

1 Ответ

1 голос
/ 03 мая 2019

Я хотел сделать то же самое.Я закончил с использованием точечной диаграммы с собственной осью X, с максимальным значением, рассчитанным по количеству стеков и групп.

Вот обновленная скрипка, использующая график рассеяния для построения точек.Вы можете легко скрыть дополнительную ось X.

http://jsfiddle.net/bpcLs7uz/

var data = {
  labels: ["January", "February", "March"],
            datasets: [
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 1'
              },
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 2'
              },
              {
                label: "Cookies",
                backgroundColor: "rgba(255,99,132,0.2)",
                data: [60, 20, 20],
                stack: 'Stack 3'
              },
              {
                label: "Scatter 1",          
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:30, x:1}, {y:30, x:5}, {y:10, x:9}],
                xAxisID: 'x-axis-2'
              },
              {
                label: "Scatter 2",          
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:24, x:2}, {y:10, x:6}, {y:15, x:10}],
                xAxisID: 'x-axis-2',
                showLine: true
              },
              {
                label: "Scatter 3",
                type: "scatter",
                fill: false,
                showLine: false,
                backgroundColor: "rgba(99,255,132,0.2)",
                data: [{y:50, x:3}, {y:9, x:7}, {y:60, x:11}],
                xAxisID: 'x-axis-2'
              }
            ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: true,
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 12,
          stepSize: 1
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          max: 160,
        },
        stacked: true,
      }]
    }
  }
});```
...