成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Chart.js使用小結(jié)_024

tuomao / 622人閱讀

摘要：使用小結(jié)官方文檔英文文檔中文文檔在中的使用開(kāi)始使用在相應(yīng)的頁(yè)面中引入先寫(xiě)一個(gè)小的作圖動(dòng)態(tài)更新的數(shù)據(jù)作圖更新數(shù)據(jù)

Chart.js使用小結(jié) 官方文檔 
英文文檔 https://www.chartjs.org/docs/...
中文文檔 https://chartjs-doc.abingoal.com
在react中的使用 開(kāi)始使用 
npm install chart.js --save

在相應(yīng)的頁(yè)面中引入 chartjs

import Chart from "chart.js"

先寫(xiě)一個(gè)小的demo

import React from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
  this.renderCanvas()
  }

  // 作圖
  renderCanvas = () => {
    const myChartRef = this.chartRef.getContext("2d");
    new Chart(myChartRef, {
      type: "line",
      data: {
        labels: [1,2,3,4,5],
        datasets: [
          {
            data: [10, 20, 50, 80, 100],
            backgroundColor: "rgba(71, 157, 255, 0.08)",
            borderColor: "rgba(0, 119, 255, 1)",
            pointBackgroundColor: "rgba(56, 96, 244, 1)",
            pointBorderColor: "rgba(255, 255, 255, 1)",
            pointRadius: 4
          }
        ]
      },
      
      options: {
        responsive: true,
        legend: {
          display: false
        },
        maintainAspectRatio: false
      }
    });
  };

  render() {
    return (
      

         (this.chartRef = ref)} />
      

    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);


https://codesandbox.io/embed/...
動(dòng)態(tài)更新的數(shù)據(jù) 
import React from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";
let currentChart;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [30, 60, 90, 120, 100]
    };
  }
  componentDidMount() {
    this.renderCanvas();
    this.renderCurrent();
  }

  // 作圖
  renderCanvas = () => {
    const myChartRef = this.chartRef.getContext("2d");
    new Chart(myChartRef, {
      type: "line",
      data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            data: [10, 20, 50, 80, 100],
            backgroundColor: "rgba(71, 157, 255, 0.08)",
            borderColor: "rgba(0, 119, 255, 1)",
            pointBackgroundColor: "rgba(56, 96, 244, 1)",
            pointBorderColor: "rgba(255, 255, 255, 1)",
            pointRadius: 4
          }
        ]
      },

      options: {
        responsive: true,
        legend: {
          display: false
        },
        maintainAspectRatio: false
      }
    });
  };

  renderCurrent = () => {
    const { data } = this.state;
    const currentCharttemp = this.currentChart.getContext("2d");
    if (typeof currentChart !== "undefined") {
      currentChart.destroy();
    }
    currentChart = new Chart(currentCharttemp, {
      type: "line",
      data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            data: data,
            backgroundColor: "rgba(71, 157, 255, 0.08)",
            borderColor: "rgba(0, 119, 255, 1)",
            pointBackgroundColor: "rgba(56, 96, 244, 1)",
            pointBorderColor: "rgba(255, 255, 255, 1)",
            pointRadius: 4
          }
        ]
      },

      options: {
        responsive: true,
        legend: {
          display: false
        },
        maintainAspectRatio: false
      }
    });
  };

  render() {
    return (
      

         (this.chartRef = ref)} />
        


        
         (this.currentChart = ref)} />
      

    );
  }
}
https://blog.bitsrc.io/custom...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106551.html

相關(guān)文章

  • 來(lái)自Chart.js的幾個(gè)JS helper function

    摘要：最近兼職的項(xiàng)目里面因?yàn)橐眠M(jìn)行數(shù)據(jù)的交互式可視化，用比較多，也踩了不少坑。內(nèi)部用這個(gè)進(jìn)行之類(lèi)的時(shí)，先深拷貝然后再擴(kuò)展，比較方便?？梢钥闯鲋苯咏o原型進(jìn)行擴(kuò)展，寫(xiě)起來(lái)非常簡(jiǎn)潔。 最近兼職的項(xiàng)目里面因?yàn)橐胏harts進(jìn)行數(shù)據(jù)的交互式可視化，用Chart.js比較多，也踩了不少坑。為了改bug提pr外加學(xué)習(xí)一下提高姿勢(shì)水平花了一點(diǎn)時(shí)間看了下源碼，發(fā)現(xiàn)一些比較有用簡(jiǎn)介的helper funct...

    Kross 評(píng)論0 收藏0

  • es6基礎(chǔ)0x024：babel簡(jiǎn)單使用

    摘要：簡(jiǎn)單的說(shuō)就是，新語(yǔ)法編譯器舊語(yǔ)法。說(shuō)明所以，對(duì)于新特性，我們可以通過(guò)使用，也可以通過(guò)語(yǔ)法轉(zhuǎn)化來(lái)達(dá)到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問(wèn)題，雖然其他語(yǔ)言也存在著兼容性問(wèn)題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復(fù)雜的歷史和時(shí)代的原因，并不加以累述。而解決兼容性問(wèn)題的方法在以前只...

    wangbinke 評(píng)論0 收藏0

  • 數(shù)據(jù)可視化--Chart.js使用總結(jié)

    摘要：概述是一個(gè)圖表庫(kù)，使用元素來(lái)展示各式各樣的客戶(hù)端圖表，支持折線圖柱形圖雷達(dá)圖餅圖環(huán)形圖等。比較輕量版本僅，且不依賴(lài)其他庫(kù)。附上解決思路是每次切換時(shí)移除舊的畫(huà)布并新建畫(huà)布，代碼如下外的容器節(jié)點(diǎn) 概述 Chart.js是一個(gè)HTML5圖表庫(kù)，使用canvas元素來(lái)展示各式各樣的客戶(hù)端圖表，支持折線圖、柱形圖、雷達(dá)圖、餅圖、環(huán)形圖等。在每種圖表中，還包含了大量的自定義選項(xiàng)，包括動(dòng)畫(huà)展示形式。...

    KaltZK 評(píng)論0 收藏0

  • chart.js 中文文檔 翻譯

    摘要：高亮最近的元素高亮同樣值的數(shù)據(jù)高亮所有的數(shù)據(jù)原色，當(dāng)鼠標(biāo)懸浮到塊是值被選中。關(guān)鍵字代表的是從構(gòu)造函數(shù)創(chuàng)建的對(duì)象。高亮最近的數(shù)據(jù)懸浮時(shí)動(dòng)畫(huà)執(zhí)行的時(shí)間，單位，毫秒調(diào)用被觸發(fā)的任何事件動(dòng)畫(huà)設(shè)置以下動(dòng)畫(huà)設(shè)置都可生效，全局設(shè)置在中定義。 chart.js Configuration文檔翻譯 tags: chart 文檔 翻譯 [TOC] Getting start開(kāi)始 下載 github上獲得最...

    y1chuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<