Код реализации iChart.js для рисования пунктирных линий и средних делящихся пунктирных линий эффектов
var data = new Array (); Data [0] = {метки: [«Блок 1», «Единица 2», «Единица 3», «Единица 4», «Блок 5»], наборы данных: [{name: «Скорость превосходства», цвет: '#1dbcfe', line_width: 4, значение: [80,75,92,62,0]}]} data [1] = {labels: in Unit 1, nate ». «Единица 4», «Блок 5»], наборы данных: [{name: «скорость превосходства», цвет: '#1dbcfe', line_width: 4, значение: [50,11,62,77,90]}]} Данные [2] = {labels: [«Блок 1», «Блок 2», «Единица 3», «Единица 4», «Блок 5», «Компания», «Компания», «Компания»: «Компания»: «Датоэзирует:». Цвет: '#1dbcfe', line_width: 4, значение: [80,51,32,44,80]}]} var _bodywidth = $ ('body'). Width ()-16; $ ('. item'). Каждый (function (i) {var _id = $ (this) .find ('. Canvas-wrap'). attr ('id'); var chart = new ichart.linebasic2d ({render: _id, данные: данные [i] .datasets, выравнивать: 'center', граница: 0, width: _bodywid*2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, высота*, _bodywidth*1.2, founal_color: '#fafafa', анимация: true, // Открыть анимацию перехода animation_duration: 600, // 600 мс. Метка: {fontsize: 24, цвет: '#333'},}, координата: {ширина: _bodywidth*1.6, valive_width: _bodywidth*1.4, высота: _bodywidth*1.6*. Scale: [{положение: «слева», start_scale: 0, end_scale: 100, scale_space: 20, scale_size: 2, scale_enable: false, label: {color: '#999', fontsize: 24}, Scale_color: '#999'}, {position: 'нижний', label: {#999 '}, {position:' нижний scale_enable: false, метки: data [i] .labels}]}}); $. COO.getscale («слева»), h = coo.height, h = (avg - s.start) * h / s.distance, y = chart.y+h - h; chart.target.textalign ('start') .TextBasele ('Middle') .TextFont ('500 20px verdana').Приведенный выше код является примером JS для рисования нескольких линейных диаграмм и метода рисования средней пунктирной линии в каждой линейной диаграмме.
iChart.js - очень хороший рисунок иконы JS. Недостаток заключается в том, что на мобильной стороне вам нужно сначала установить вдвое больше, а затем вручную сузить его до нормального диапазона с CSS и JS, чтобы сохранить его высоким разрешением на экране.
Есть примеры рисования средних линий на официальном сайте, но нет пунктирных линий. Как правило, чтобы не путать, средние линии рисуются с использованием пунктирных линий. Здесь я только что зарисовал, чтобы нарисовать прямую линию n-end, которая является обходным пути. Если есть лучший способ, оставьте сообщение. Спасибо.
Приведенный выше код для рисования пунктирных линий и одинаково разделенных пунктирных линий в iChart.js - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.