Блог

Главная - Вопросы по программированию - Измените цвет поля условных обозначений и цвет линий сетки x в chart.js

Измените цвет поля условных обозначений и цвет линий сетки x в chart.js

#javascript #vue.js #chart.js #vue-component #chart.js3

Вопрос:

Доброго всем дня:

Недавно я начал работать с Vue.js(2.6.12) Vuetify(2.3.10) и Chart.js(3.0.2). Так что я новичок (снова).

Я создал компонент, который обертывает гистограмму, которая Chart.js позволяет нам творить. Вот его фотография:Созданный компонент

Единственные две вещи, которые я хочу изменить, — это маленькая коробочка, которая находится рядом с заголовком легенды, и несколько линий сетки x.

В случае с маленькой коробочкой с легендой она красная. Я бы хотел, чтобы он соответствовал синему цвету текста заголовка легенды. Как я показываю вам на этой картинке:Текст заголовка поля и легендыРезультат, которого я хотел бы достичь

Наконец, я хочу включить некоторый цвет (розовый) в ось X:

Я не в состоянии этого достичь. Я ознакомился и следую официальной документации, и ничего не работает :S.

В случае с полем заголовка легенды я заметил, что оно всегда принимает цвет первого элемента. В случае оси функция, поддерживаемая chart.js на меня это не действует. Он вообще не выводит мне ось x.

Вещи, которые я пробовал:

  • Обновление до chart.js 3.3.0, но я получил такую ошибку: «» Причина, по которой я использовал 3.0.2, заключается в том, что это единственная версия, которая работает со мной из версий 3.0.0.
  • Понизить рейтинг до 2.9.3/4. Я не смог изменить цвет коробки или линий оси, но все остальное работало нормально.
  • Используйте обертку: https://vue-chartjs.org/. Это не сработало

Код всего компонента:

 <template>
  <div class="container pa-3" fill-height fluid style="width: 100%">
    <!-- We create the chart -->
    <canvas id="myChart1" />
  </div>
</template>

<script>
import Chart from "chart.js/auto";

export default {
  name: "Chart",

  components: {},

  props: {},

  data: () => ({
    ctx: null,
    myChart: null,
    type: "bar",
    data: {
      labels: ["a", "b", "c", "d"],
      datasets: [
        {
          data: [1, 2, 3, 4],
          backgroundColor: ["#c30", "#e37609", "#ffda05", "#fffb05"],
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: true,
          labels: {
            color: "#00a3fb",
          },
        },
      },
      scales: {
   
      },
    },
  }),
  methods: {
    createChart: function () {
      // destroy the previous graph
      if (this.myChart != null) this.myChart.destroy();
      // create a new one
      this.ctx = document.getElementById("myChart1");
      this.myChart = new Chart(this.ctx, {
        type: this.type,
        data: this.data,
        options: this.options,
      });
      this.myChart.render();
    },
  },

  destroyed() {},

  mounted() {
    this.createChart();
  },
  watch: {},
};
</script>

<style scoped>
</style>

Для его использования вам следует:

  • Импортируйте его в раздел
  • Объявите об этом в разделе компонентов
  • Назовите это по <NameOfComponetGiven/> тегу

Любая помощь была бы весьма кстати. Большое спасибо.

Комментарии:

1. Не могли бы вы указать причину ошибки, по которой вы не используете более актуальную версию библиотеки вместо пустых вопросов

Ответ №1:

Чтобы настроить цвет поля условных обозначений, вам нужно будет использовать пользовательскую HTML-легенду, там вы можете указать ее с помощью CSS, для розовых линий сетки вы можете использовать параметры сценария. Для обоих см. Пример:

 const getOrCreateLegendList = (chart, id) => {
  const legendContainer = document.getElementById(id);
  let listContainer = legendContainer.querySelector('ul');

  if (!listContainer) {
    listContainer = document.createElement('ul');
    listContainer.style.display = 'flex';
    listContainer.style.flexDirection = 'row';
    listContainer.style.margin = 0;
    listContainer.style.padding = 0;

    legendContainer.appendChild(listContainer);
  }

  return listContainer;
};

const htmlLegendPlugin = {
  id: 'htmlLegend',
  afterUpdate(chart, args, options) {
    const ul = getOrCreateLegendList(chart, options.containerID);

    // Remove old legend items
    while (ul.firstChild) {
      ul.firstChild.remove();
    }

    // Reuse the built-in legendItems generator
    const items = chart.options.plugins.legend.labels.generateLabels(chart);

    items.forEach(item => {
      const li = document.createElement('li');
      li.style.alignItems = 'center';
      li.style.cursor = 'pointer';
      li.style.display = 'flex';
      li.style.flexDirection = 'row';
      li.style.marginLeft = '10px';

      li.onclick = () => {
        const {
          type
        } = chart.config;
        if (type === 'pie' || type === 'doughnut') {
          // Pie and doughnut charts only have a single dataset and visibility is per item
          chart.toggleDataVisibility(item.index);
        } else {
          chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
        }
        chart.update();
      };

      // Color box
      const boxSpan = document.createElement('span');
      boxSpan.style.background = options.legendBoxColor || item.fillStyle;
      boxSpan.style.borderColor = item.strokeStyle;
      boxSpan.style.borderWidth = item.lineWidth   'px';
      boxSpan.style.display = 'inline-block';
      boxSpan.style.height = '20px';
      boxSpan.style.marginRight = '10px';
      boxSpan.style.width = '20px';

      // Text
      const textContainer = document.createElement('p');
      textContainer.style.color = options.legendTextColor || item.fontColor;
      textContainer.style.margin = 0;
      textContainer.style.padding = 0;
      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';

      const text = document.createTextNode(item.text);
      textContainer.appendChild(text);

      li.appendChild(boxSpan);
      li.appendChild(textContainer);
      ul.appendChild(li);
    });
  }
};

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          color: (line) => ((line.index === 2 || line.index === 3) ? 'pink' : 'rgba(0,0,0,0.1)'),
          lineWidth: (line) => ((line.index === 2 || line.index === 3) ? 6 : 1)
        }
      }
    },
    plugins: {
      htmlLegend: {
        // ID of the container to put the legend in
        containerID: 'legendContainer',
        legendBoxColor: 'blue',
        legendTextColor: 'blue'
      },
      legend: {
        display: false,
      }
    }
  },
  plugins: [htmlLegendPlugin]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); 
 <body>
  <div id="legendContainer"></div>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js"></script>
</body>
Метки: