Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2017, 18:47
Новичок на форуме
Отправить личное сообщение для IGI66 Посмотреть профиль Найти все сообщения от IGI66
 
Регистрация: 01.07.2017
Сообщений: 5

Настройка графика Chart.js
Использую этот плагин http://www.chartjs.org/
Нужно добавить отсупы внутри осей, что бы график не был впритык к оси x-y.
Вот что у меня есть

Вот как должно

function initHistoryChart() {
  var ctx = $("#historyChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
      datasets: [{
        label: 'product1',
        yAxisID: 'place',
        fill: false,
        borderColor: "#f78a00",
        pointBackgroundColor: "#f78a00",
        pointHoverBorderColor: "#f78a00",
        pointBorderWidth: 10,
        pointRadius: 0,
        pointHitRadius: 10,
        borderWidth: 3,
        lineTension: 0,
        data: [3, 3, 4, 5, 4, 6, 5, 7, 5, 6, 3, 5]
      },
      {
        label: 'product2',
        yAxisID: 'customers',
        fill: false,
        borderColor: "#7cc182",
        pointBackgroundColor: "#7cc182",
        pointHoverBorderColor: "#7cc182",
        borderWidth: 3,
        pointBorderWidth: 10,
        pointRadius: 0,
        pointHitRadius: 10,
        lineTension: 0,
        borderCapStyle: "square",
        borderDash: [10],
        data: [10000, 21000, 19000, 35000, 32000, 45000, 42000, 38000, 24000, 23000, 18000, 15000]
      },
      {
        label: 'product3',
        yAxisID: 'place',
        fill: false,
        borderColor: "#fbdb00",
        pointBackgroundColor: "#fbdb00",
        pointHoverBorderColor: "#fbdb00",
        borderWidth: 3,
        pointBorderWidth: 10,
        pointRadius: 0,
        pointHitRadius: 10,
        lineTension: 0,
        borderCapStyle: "square",
        borderDash: [10],
        data: [5, 3, 4, 2, 10, 6, 4, 2, 3, 5, 7, 6]
      }]
    },

    options: {
      scaleShowVerticalLines: false,
      tooltips: {
        backgroundColor: "rgba(0,0,0,0)",
        titleFontSize: 0,
        bodyFontSize: 16,
        bodyFontColor: "#8592a7",
        bodyFontStyle: "bold",
        titleMarginBottom: 0,
        displayColors: false,
        xPadding: 10,
        callbacks: {
          label: function (t, d) {
            if (t.datasetIndex === 0) {
              return "position: " + t.yLabel;
            } else if (t.datasetIndex === 1) {
              return "sales objective: " + t.yLabel;
            } else if (t.datasetIndex === 2) {
              return "ranking position objective: " + t.yLabel;
            } else
              return t.yLabel;
          },
          labelTextColor: function (t, c) {
            if (t.datasetIndex === 0) {
              return '#f78a00';
            } else if (t.datasetIndex === 1) {
              return '#7cc182';
            } else if (t.datasetIndex === 2) {
              return '#fbdb00';
            } else
              return '#8592a7';
          }
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          ticks: {
            fontColor: "#8592a7",
            fontSize: 18,
            fontFamily: "'dosis'"
          },
          gridLines: {
            display: false,
            color: "#8592a7",
            lineWidth: 4

          },
          scaleLabel: {
            display: true,
            labelString: "month",
            fontColor: "#8592a7",
            fontSize: 20,
            fontFamily: "'dosis'"
          }
        }],
        yAxes: [{
          id: "place",
          position: "left",
          stepSize: 50,
          ticks: {
            min: 1,
            max: 20,
            stepSize: 5,
            reverse: true,
            fontColor: "#8592a7",
            fontSize: 18,
            fontFamily: "'dosis'"
          },
          gridLines: {
            display: false,
            color: "#8592a7",
            lineWidth: 4,
            drawTicks: true,
            tickMarkLength: 15
          },
          scaleLabel: {
            display: true,
            labelString: "#place",
            fontColor: "#8592a7",
            fontSize: 20,
            fontFamily: "'dosis'"
          },
        }, {
          id: "customers",
          position: "right",
          gridLines: {
            display: false,
            color: "#8592a7",
            lineWidth: 4
          },
          ticks: {
            fontColor: "#8592a7",
            fontSize: 18,
            fontFamily: "'dosis'",
            min: 0,
            max: 50000,
            stepSize: 10000
          },
          scaleLabel: {
            display: true,
            labelString: "#customers",
            fontColor: "#8592a7",
            fontSize: 20,
            fontFamily: "'dosis'"
          }
        }]
      }
    }
  });
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запрограммировать 3 графика на JS frbd Работа 3 15.12.2016 20:25
построение графика Игорь85 Общие вопросы Javascript 0 09.10.2016 09:30
библиотека javascript для построения контурного графика kononov Общие вопросы Javascript 1 28.04.2016 14:23
Профессиональная настройка Яндекс Директ и Google Adwords Alex.Directolog Работа 0 28.08.2015 20:30
Нужна помощь с постройкой графика Gannik Ваши сайты и скрипты 0 05.07.2014 14:48