比較文本

尋找兩個文字檔案之間的差異

即時編輯器

隱藏空白變更

摺疊未變更行

關閉換行

檢視

比對精度

文字樣式

語法突出顯示

Diffchecker Desktop 執行Diffchecker最安全的方式。取得Diffchecker桌面應用程式：您的差異永遠不會離開您的電腦！取得桌面版

Untitled diff

建立於 9 年前差異永不過期

13 刪除

行
總計
刪除

字符
總計
刪除

要繼續使用此功能，請升級到 Diffchecker Pro 查看價格

80 行

15 新增

行
總計
新增

字符
總計
新增

要繼續使用此功能，請升級到 Diffchecker Pro 查看價格

82 行

const { VictoryChart, VictoryBar,VictoryPie ,

VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;

const colors = [

'#F56D00', '#9F3AB7', '#64CCE9', '#32120A',

'#F8984C', '#BB75CC', '#92DBEF', '#6F5953',

'#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']

class DonutChart extends React.Component {

static propTypes = {

data: PropTypes.arrayOf(PropTypes.object).isRequired,

width: PropTypes.number.isRequired,

height: PropTypes.number.isRequired,

innerRadius: PropTypes.number.isRequired

}

render() {

let { data, innerRadius, width, height } = this.props

const colorScale = colors.slice(0, data.length)

const total = data.reduce((a, b) => ({ y: a.y + b.y }))

const viewBox = `0 0 ${width} ${height}`

const legendDataWithStyle = data.map((dateItem, index) => {

return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }

}

)

return (

<VictoryPie

standalone={false}

width={width} height={height}

data={data}

innerRadius={innerRadius}

colorScale={colorScale}

<VictoryLabel

textAnchor="middle"

style={{ fontSize: 20 }}

x={width / 2} y={height / 2}

text={total.y}

<VictoryLegend x={width} y={30}

title="Totals"

centerTitle

orientation="vertical"

gutter={20}

style={{

title: { fontSize: 15 }

}}

data={legendDataWithStyle}

standalone={false}

</g>

<VictoryLegend x={width - 50} y={30}

title="Totals"

centerTitle

orientation="vertical"

gutter={20}

style={{

title: { fontSize: 15 }

}}

data={legendDataWithStyle}

standalone={false}

</svg>

</div>

)

}

const dounutData = [

{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },

{ x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }

];

ReactDOM.render(

<DonutChart data={dounutData} width={300} height={300}

innerRadius={68} />,

document.getElementById('container')

);

已保存差異

原始文本

開啟檔案

const {  VictoryChart, VictoryBar,VictoryPie ,
  VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
 
 const colors = [
  '#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
  '#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
  '#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
class DonutChart extends React.Component {

static propTypes = {
    data: PropTypes.arrayOf(PropTypes.object).isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    innerRadius: PropTypes.number.isRequired
  }

render() {
    let { data, innerRadius, width, height } = this.props
    const colorScale = colors.slice(0, data.length)
    const total = data.reduce((a, b) => ({ y: a.y + b.y }))
    const viewBox = `0 0 ${width} ${height}`

const legendDataWithStyle = data.map((dateItem, index) => {
      return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
    }
    )

return (
      <div style={{ width: width + 100, height: height + 100 }} >
        <svg viewBox={viewBox}>

</svg>
      </div>
    )
  }
}

const dounutData = [
  { x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
  { x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
];

ReactDOM.render(
<DonutChart data={dounutData} width={300} height={300}
                      innerRadius={68} />,
  document.getElementById('container')
);

更改後文本

開啟檔案

render() {
    let { data, innerRadius, width, height } = this.props
    const colorScale = colors.slice(0, data.length)
    const total = data.reduce((a, b) => ({ y: a.y + b.y }))

const legendDataWithStyle = data.map((dateItem, index) => {
      return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
    }
    )

return (
      <div style={{ width: width + 100, height: height + 100 }} >
        <svg width={width + 100} height={height}>

</svg>
      </div>
    )
  }
}

const dounutData = [
  { x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
  { x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
];

ReactDOM.render(
<DonutChart data={dounutData} width={300} height={300}
                      innerRadius={68} />,
  document.getElementById('container')
);